From 414011d5ee4b1137369ee521e8dfea7d04817d7c Mon Sep 17 00:00:00 2001 From: Agatha Rose Date: Sat, 14 Aug 2021 18:27:49 +0300 Subject: [PATCH] squishy button --- index.css | 58 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 21 ++++++++++++++++++++ 2 files changed, 79 insertions(+) create mode 100644 index.css create mode 100644 index.html diff --git a/index.css b/index.css new file mode 100644 index 0000000..94cf9e7 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..85c3cbc --- /dev/null +++ b/index.html @@ -0,0 +1,21 @@ + + + + + + + + + + + + Edible button + + + +
+

meow
kittens

+
+ + + \ No newline at end of file