我对问题的理解是，你不仅要放置角落，但淡出以及？
如果是这样的话，那么我，像Temani一样，也会使用background-image：

/* a simple CSS reset to remove all default margin and padding,
   set all elements to inherit font properties from their
   ancestors, and ensure all elements are sized in such a way
   that their assigned size includes the border and padding widths: */
*,
::before,
::after {
  box-sizing: border-box;
  font: inherit;
  margin: 0;
  padding: 0;
}

body {
  background-color: hsl(220deg 95% 10% / 1);
  block-size: 100vh;
  font-family: system-ui;
  font-size: 16px;
  font-weight: 400;
}

main {
  block-size: 100%;
  /* using the following two rules to place the <button>
     element in the center - horizontal and vertical - of
     the <main> element: */
  display: grid;
  place-content: center;
}

button {
  /* using CSS custom properties to define the various
     properties of the borders we're creating,
     first the thickness of the "border": */
  --border-thickness: 0.25em;
  /* the length of the "border" on each of its axes: */
  --border-length: 90%;
  /* the start-color of the "border", which will color the
     corner/start: */
  --border-corner-color: hsl(0deg 100% 100% / 1);
  /* the "size" of the corner part: */
  --border-offset: 0.5em;
  /* the color that will fade out: */
  --border-fadeout-color: hsl(220deg 95% 60% / 1);
  background-color: transparent;
  /* using multiple background-images - using the CSS
     gradient linear-gradient() function: */
  background-image:
    linear-gradient(
      90deg,
      var(--border-corner-color) 0 var(--border-offset),
      var(--border-fadeout-color) var(--border-offset),
      transparent
     ),
     linear-gradient(
       180deg,
       var(--border-corner-color) 0 var(--border-offset),
       var(--border-fadeout-color) var(--border-offset),
       transparent
     ), linear-gradient(
       270deg,
       var(--border-corner-color) 0 var(--border-offset),
       var(--border-fadeout-color) var(--border-offset),
       transparent
     ),
     linear-gradient(
       0deg,
       var(--border-corner-color) 0 var(--border-offset),
       var(--border-fadeout-color) var(--border-offset),
       transparent
     );
  /* defining the various background-positions of each of the
     gradients: */
  background-position: 0 0, 0 0, 100% 100%, 100% 100%;
  background-repeat: no-repeat;
  background-size:
    var(--border-length) var(--border-thickness),
    var(--border-thickness) var(--border-length),
    var(--border-length) var(--border-thickness),
    var(--border-thickness) var(--border-length);
  border-width: 0;
  color: hsl(220deg 95% 90% / 1);
  font-size: 2rem;
  padding-block: 1em;
  padding-inline: 2em;
}

<main>
  <button>Button text</button>
</main>

参考文献：

• background-image。
• background-position。
• background-repeat()。
• background-size。
• CSS Custom Properties。
• linear-gradient()。

如果你不是在寻找模糊效果，你可以使用渐变来实现这一点

button {
  --t: 3px;  /* thickness */
  --s: 15px; /* size */
  --c: #fff; /* color */
  
  padding: 10px 20px;
  margin: 20px;
  font-size: 20px;
  border: none;
  color: #fff;
  background:
    conic-gradient(at left var(--t) bottom var(--t),#0000 25%,var(--c) 0) bottom left,
    conic-gradient(from 180deg at right var(--t) top var(--t),#0000 25%,var(--c) 0) top right;
  background-size: var(--s) var(--s);
  background-repeat: no-repeat;
}

body {
  background: #000;
}

<button>button</button>

如果你想知道更多细节，我在一篇相关文章中使用了这样的技术：https://css-tricks.com/fancy-image-decorations-single-element-magic/

button {
  position: relative;
  width: 100px;
  height: 50px;
  border: none;
  background: black;
  color: white;
}

.svg1 {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

button .svg1 rect {
  width: 100%;
  height: 100%;
  fill: transparent;
  stroke: red;
  stroke-width: 5px;
  stroke-dasharray: 0 75 50 100 50 50;
}

<button>Click me
<svg class='svg1'>
<rect />
</svg>
</button>

如果您更改按钮的宽度和高度，则需要调整stroke-dasharray