Browse Source

squishy button

mistress
Agatha Lovelace 2 months ago
commit
414011d5ee
Signed by: sorceress GPG Key ID: 2DB18BA2E0A80BC3
  1. 58
      index.css
  2. 21
      index.html

58
index.css

@ -0,0 +1,58 @@
.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;
}

21
index.html

@ -0,0 +1,21 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/index.css">
<meta name="description" content="you should try eating this button!">
<meta name="theme-color" content="#353052">
<title>Edible button</title>
</head>
<body>
<div class="button">
<p>meow<br>kittens</p>
</div>
</body>
</html>
Loading…
Cancel
Save