<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;
}
View Compiled
/* ?(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) });
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.