El principal beneficio de este estilo es la "frescura" (al menos mientras dure). Trae esa "nueva sensación" a la interfaz y hace que destaque. También se puede mezclar con otros estilos, así que no es abrumadoramente "plástico extruido suave" en todas partes.
<div class="btns-wrapper">
<div class="btn active">
<div class="inner-wrapper">
<i>⏵︎</i>
</div>
</div>
<div class="btn">
<div class="inner-wrapper">
<i>⏸︎</i>
</div>
</div>
<div class="btn">
<div class="inner-wrapper">
<i>⏹︎</i>
</div>
</div>
</div>
* {
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
body {
background: linear-gradient(318.32deg, #C3D1E4 0%, #DDE7F3 55%, #D4E0ED 100%);
display: grid;
place-items: center;
}
.btns-wrapper {
display: grid;
grid-auto-flow: column;
padding: 16px;
gap: 24px;
}
.btn {
width: 62px;
height: 62px;
position: relative;
border-radius: 18px;
padding: 2px;
box-shadow: 4px 2px 16px rgba(136, 165, 191, 0.48), -4px -2px 16px #FFFFFF;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
.inner-wrapper {
width: 100%;
height: 100%;
border-radius: 16px;
transition: all .2s ease-in-out;
display: grid;
place-items: center;
i {
user-select: none;
transition: all .2s ease-in-out;
font-size: 32px;
position: relative;
color: rgba(201, 215, 230, 0.8);
text-shadow: 2px 2px 2px #d6e1ef99, 0 0 0 #000, 2px 2px 2px #d6e1ef00;
}
}
}
.btn.active {
.inner-wrapper {
box-shadow: inset 3px 3px 7px rgba(136, 165, 191, 0.48), inset -3px -3px 7px #FFFFFF;
i {
text-shadow: 1px 1px 1px #d6e1ef99, 0 0 0 #000, 1px 1px 1px #d6e1ef00;
}
}
}
const btns = document.querySelectorAll('.btn');
for (let btn of btns) {
btn.onclick = () => btn.classList.toggle('active');
}