124 lines
1.9 KiB
CSS
124 lines
1.9 KiB
CSS
:root {
|
|
--btn-dark: #1C1C1C;
|
|
--btn-light: #E3E3E3;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Lato';
|
|
src: url('fonts/Lato-Regular.ttf');
|
|
src: url('fonts/Lato-Regular.ttf') format('truetype');
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
body {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: 1fr;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
}
|
|
|
|
main {
|
|
display: grid;
|
|
|
|
background: #0002;
|
|
}
|
|
|
|
.grid.center {
|
|
place-content: center;
|
|
place-items: center;
|
|
}
|
|
|
|
.btn {
|
|
|
|
}
|
|
.btn:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.btn.cbtn {
|
|
display: grid;
|
|
place-content: center;
|
|
place-items: center;
|
|
position: relative;
|
|
|
|
padding: 2.2rem;
|
|
margin: -.4rem;
|
|
|
|
width: 0;
|
|
height: 0;
|
|
|
|
border: none;
|
|
background: none;
|
|
color: var(--btn-dark);
|
|
font: unset;
|
|
|
|
border-radius: 100vw;
|
|
}
|
|
|
|
@keyframes cbtn-click {
|
|
from {
|
|
padding: 0rem;
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
padding: inherit;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.btn.cbtn > .click {
|
|
position: absolute;
|
|
padding: 0rem;
|
|
opacity: 1;
|
|
z-index: 10000;
|
|
|
|
border-radius: 100vw;
|
|
width: 0;
|
|
height: 0;
|
|
|
|
/*box-shadow: inset 0 0 2px #FFF;*/
|
|
background: #DDD8;
|
|
border: 4px solid #fff;
|
|
|
|
animation: cbtn-click .2s;
|
|
}
|
|
|
|
.btn.sbtn {
|
|
padding: 1rem 2rem;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
font-family: Lato;
|
|
}
|
|
.btn.sbtn::after {
|
|
|
|
}
|
|
|
|
.shadow {
|
|
display: inherit;
|
|
place-content: center;
|
|
place-items: center;
|
|
position: absolute;
|
|
|
|
filter: invert(1);
|
|
background: var(--btn-light);;
|
|
overflow: hidden;
|
|
|
|
padding: 0rem;
|
|
|
|
width: 0;
|
|
height: 0;
|
|
|
|
border-radius: 100vw;
|
|
|
|
transition: padding .2s;
|
|
}
|
|
/* When deployed on a platform, choose one or the other, not both */
|
|
.btn.cbtn:focus > .shadow, /* TV */
|
|
.btn.cbtn:hover > .shadow /* PC */ {
|
|
padding: inherit;
|
|
} |