sorceress
/
edible-button
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

squishy button

This commit is contained in:
Agatha Lovelace 2021-08-14 18:27:49 +03:00
commit 414011d5ee
No known key found for this signature in database
GPG Key ID: 2DB18BA2E0A80BC3
2 changed files with 79 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
index.css Normal file
View File

@ -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 Normal file
View File

@ -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>