<button class="btn" type="button">Button</button>

<!--
And when i'm done coding this...
--second structure--
(if javascript is off or the browser did not support css filter:blur)
<button class="btn-fallback btn-fluent">Text</button

(if javascript is on and browser did support css filter:blur)
<button class="btn-fluent">
<text/> z-index: 1;
<circle1/> width&height: height->btn-fluent + [num]em; z-index: 2;
<circle2/> width&height: height->btn-fluent + [num]em; z-index: 2;
</button>
-- easy to read & style and maybe can add the original light effect (which i like) and also colored background
-- might code it, might not.
-->

<a href="https://abubakersaeed.netlify.app/designs/d1-button-fluent-design" class="abs-site-link" rel="nofollow noreferrer" target="_blank">abs/designs/d1-button-fluent-design</a>

/*
Please Do Try:
  #mouse-users: click&hold and move mouse
  #keyboard-users: press and hold "SpaceBar" while focus
*/

* {

  &,
  &::after,
  &::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

}

html {

  & {
    font-size: (10/16) * 100%;
  }

}

body {

  & {
    width: 100vw;
    height: 100vh;
    background: hsl(0, 0%, 15%);
    font-family: 'Segoe UI', Tahoma, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
  }

}

.btn {

  & {
    display: inline-block;
    position: relative;
    color: hsl(0, 0%, 94%);
    background: transparent;
    font-family: inherit;
    padding: 2rem 7rem;
    border: 0 solid transparent;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: .4rem;
    outline: .2rem solid transparent;
    outline-offset: .6rem;
    overflow: hidden;
    user-select: none;
  }

  // windows high contrast mode /start
  // =================================
  @media screen and (-ms-high-contrast: active) {

    & {
      color: buttonText;
      border: 0;
      outline-color: currentColor;
      outline-offset: .2rem;
    }

    &:hover,
    &:focus {
      background: highlight;
    }

    &::before,
    &>.span1,
    &>.span2 {
      display: none;
    }

  }

  // ===============================
  // windows high contrast mode /end

  &::before {
    content: " ";
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
      linear-gradient(to right, hsla(0, 0%, 94%, .6) 0px, transparent 2px, transparent 2px),
      linear-gradient(to left, hsla(0, 0%, 94%, .6) 0px, transparent 2px, transparent 2px),
      linear-gradient(to bottom, hsla(0, 0%, 94%, .6) 0px, transparent 2px, transparent 2px),
      linear-gradient(to top, hsla(0, 0%, 94%, .6) 0px, transparent 2px, transparent 2px);
    opacity: .1;
  }

  &>* {
    display: inline-block;
    position: absolute;
    z-index: -1;
  }

  &>.span1 {
    width: 110%;
    height: 110%;
    border-radius: 100%;
    background: radial-gradient(circle at center, hsla(0, 0%, 94%, .6), transparent);
    transform: translate(-50%, -50%);
    filter: blur(4rem);
    opacity: 0;

    // windows high contrast mode /start
    // =================================
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
      display: none;
    }

    // windows high contrast mode /end
    // ===============================
  }

  &>.span2 {
    width: 0;
    height: 0;
    border-radius: 100%;
    transform: translate(-50%, -50%);
    //background: hsl(0, 0%, 94%); // uncomment this if you need background on .span2
    box-shadow: 0 0 0 0 hsl(0, 0%, 94%), inset 0 0 1rem hsl(0, 0%, 94%);
    opacity: .4;
  }

  // firefox dotted border on focus /start
  // =====================================
  &::-moz-focus-inner {
    border: 0;
    padding: 0;
  }

  // ===================================
  // firefox dotted border on focus /end

  &:active {
    transform: scale(.98); // <- this, does not work, when using keyboard in Firefox
  }

  &:focus {

    & {
      border-width: .2rem; // does not needed, but for Windows High Contrast Mode.
      outline-color: hsla(0, 0%, 94%, .2); // really bad idea to use alpha in outline-color
    }

    &>.span1 {
      top: 90% !important;
      left: 50% !important;
      opacity: 1 !important;
    }

  }

}

// Border Issue -- Outside Of The Box And Not Giving The Result I Want (Little Light Effect)
/*
.btn {

& {
border: .4rem solid hsla(0, 0%, 94%, .1);
}

}
*/

// Colored Background --removes outline (z-index issue)
/*
.btn {

&::after {
content: " ";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to right, hsl(220, 50%, 34%), hsl(320, 50%, 34%));
z-index: -2;
}

}
*/

// Original Light Effect -(hover over the button to see)
/*
.btn {

&::after {
content: "here";
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 2;
}

&::before {
background: hsl(0, 0%, 15%);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(100% - 2px);
height: calc(100% - 2px);
opacity: 1;
}

}
*/

.abs-site-link {
  position: fixed;
  bottom: 20px;
  left: 20px;
  color: hsla(0, 0%, 100%, .6);
  font-size: 1.6rem;
}

/* ?(Fluent Design)-> is by Microsoft, used in Windows 10 devices and platforms. */

// code might be messy
// ===================

var btn = document.querySelector(".btn");

function addSpans(btn) {
  var span1 = document.createElement("span");
  span1.className = "span1";

  var span2 = document.createElement("span");
  span2.className = "span2";

  btn.appendChild(span1);
  btn.appendChild(span2);
}

function mouseEnter(span) {
  span.style.opacity = "1";
}

function mouseLeave(span) {
  span.style.opacity = "0";
}

function mouseDown(span) {
  span.style.transition = "box-shadow .6s";
  span.style.boxShadow = "0 0 10rem 4rem hsl(0, 0%, 94%), inset 0 0 1rem hsl(0, 0%, 94%)";
  span.style.width = "2rem";
  span.style.height = "2rem";
}

function mouseUp(span) {
  span.style.transition = "box-shadow 0s";
  span.style.boxShadow = "0 0 0 0 hsl(0, 0%, 94%), inset 0 0 1rem hsl(0, 0%, 94%)";
  span.style.width = "0";
  span.style.height = "0";
}

function mouseMove(span, e) {
  span.style.top = e.offsetY + "px";
  span.style.left = e.offsetX + "px";
}

function keyDown(span) {
  mouseDown(span);
  span.style.top = "100%";
  span.style.left = "50%";
}

window.addEventListener("load", addSpans(btn));
var span1 = btn.querySelector(".span1");
var span2 = btn.querySelector(".span2");


// mouse events
// ============
// edge issue
// not applying filter: blur() properly
if (window.navigator.userAgent.indexOf("Edge") > -1) {
  span1.style.display = "none";
} else {
  btn.addEventListener("mouseenter", function() { mouseEnter(span1) });
  btn.addEventListener("mouseleave", function() { mouseLeave(span1) });
  btn.addEventListener("mousemove", function(e) { mouseMove(span1, e) });
}

btn.addEventListener("mouseleave", function() { mouseUp(span2)} );
btn.addEventListener("mousemove", function(e) { mouseMove(span2, e) });
btn.addEventListener("mousedown", function() { mouseDown(span2) });
btn.addEventListener("mouseup", function() { mouseUp(span2) });

// keyboard events
// ===============
btn.addEventListener("keydown", function(e) {
  if(e.key === " " && (e.code === "Space" || e.keyCode === 32) || e.key === "Spacebar" && e.keyCode === 32) {
    keyDown(span2)
  }
})
btn.addEventListener("keyup", function(e) {
  if(e.key === " " && (e.code === "Space" || e.keyCode === 32) || e.key === "Spacebar" && e.keyCode === 32) {
    mouseUp(span2)
  }
})

// touch events
// ============
btn.addEventListener("touchstart", function() { keyDown(span2) });
btn.addEventListener("touchend", function() { mouseUp(span2) });