58 lines
1.0 KiB
CSS
58 lines
1.0 KiB
CSS
|
.button {
|
||
|
|
position: absolute;
|
||
|
|
margin: auto;
|
||
|
|
top: 0; bottom: 0; left: 0; right: 0;
|
||
|
|
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
font-size: 2em;
|
||
|
|
font-family: monospace;
|
||
|
|
color: #aba3d8;
|
||
|
|
|
||
|
|
width: 300px;
|
||
|
|
height: 300px;
|
||
|
|
|
||
|
|
border-radius: 50%;
|
||
|
|
box-shadow: 30px 30px 60px #3d2e4b,
|
||
|
|
-30px -30px 60px #533e65;
|
||
|
|
}
|
||
|
|
|
||
|
|
.button::after,
|
||
|
|
.button::before {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
border-radius: 50%;
|
||
|
|
z-index: -1;
|
||
|
|
top: 0; bottom: 0; left: 0; right: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.button::before {
|
||
|
|
background: linear-gradient(145deg, #4d3a5e, #41314f);
|
||
|
|
}
|
||
|
|
|
||
|
|
.button::after {
|
||
|
|
background: linear-gradient(145deg, #41314f, #4d3a5e);
|
||
|
|
opacity: 0%;
|
||
|
|
transition: opacity 0.3s ease-in-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
.button:active::after {
|
||
|
|
opacity: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.button p {
|
||
|
|
text-align: center;
|
||
|
|
transition: opacity 0.3s ease-in-out;
|
||
|
|
filter: drop-shadow(0 0 5px #9b8ca8);
|
||
|
|
}
|
||
|
|
|
||
|
|
.button:active p {
|
||
|
|
opacity: 40%;
|
||
|
|
transition: opacity 0.3s ease-in-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
html {
|
||
|
|
background-color: #483658;
|
||
|
|
}
|