From eaa91e60f83ec0c7025ac687cb21a7c9d864919b Mon Sep 17 00:00:00 2001 From: stossy11 <69031796+stossy11@users.noreply.github.com> Date: Thu, 19 Sep 2024 11:25:28 +1000 Subject: [PATCH] Update styles.css --- styles.css | 79 +++++++++++++++++++++++++++++++++++++++++------------- 1 file changed, 60 insertions(+), 19 deletions(-) diff --git a/styles.css b/styles.css index 1aa6fc3..9236a08 100644 --- a/styles.css +++ b/styles.css @@ -54,30 +54,71 @@ a { transition: background-color 0.3s ease; } -.button.blue { - background-color: #4285f4; +/* CSS */ +.button-85 { + padding: 0.6em 2em; + border: none; + outline: none; + color: rgb(255, 255, 255); + background: #111; + cursor: pointer; + position: relative; + z-index: 0; + border-radius: 10px; + user-select: none; + -webkit-user-select: none; + touch-action: manipulation; } -.button.black { - background-color: #333; +.button-85:before { + content: ""; + background: linear-gradient( + 45deg, + #ff0000, + #ff7300, + #fffb00, + #48ff00, + #00ffd5, + #002bff, + #7a00ff, + #ff00c8, + #ff0000 + ); + position: absolute; + top: -2px; + left: -2px; + background-size: 400%; + z-index: -1; + filter: blur(5px); + -webkit-filter: blur(5px); + width: calc(100% + 4px); + height: calc(100% + 4px); + animation: glowing-button-85 20s linear infinite; + transition: opacity 0.3s ease-in-out; + border-radius: 10px; } -.button.green { - background-color: #34a853; +@keyframes glowing-button-85 { + 0% { + background-position: 0 0; + } + 50% { + background-position: 400% 0; + } + 100% { + background-position: 0 0; + } } -.button.teal { - background-color: #00bcd4; +.button-85:after { + z-index: -1; + content: ""; + position: absolute; + width: 100%; + height: 100%; + background: #222; + left: 0; + top: 0; + border-radius: 10px; } -.button.altstore { - background-color: #13b0a9; -} - -.button.red { - background-color: #E4080A; -} - -.button:hover { - opacity: 0.8; -}