From 9da84acca35d448338c63e01eb6032f9dfb00ff8 Mon Sep 17 00:00:00 2001 From: ssbg04 <143066036+ssbg04@users.noreply.github.com> Date: Wed, 4 Jun 2025 14:00:38 +0800 Subject: [PATCH] Update index.html --- index.html | 66 +++++++++++++++++++++--------------------------------- 1 file changed, 26 insertions(+), 40 deletions(-) diff --git a/index.html b/index.html index a0ef32d..8296cbb 100644 --- a/index.html +++ b/index.html @@ -88,54 +88,40 @@ } */ /* From Uiverse.io by cssbuttons-io */ +/* From Uiverse.io by lenfear23 */ button { - --glow-color: rgb(217, 176, 255); - --glow-spread-color: rgba(191, 123, 255, 0.781); - --enhanced-glow-color: rgb(231, 206, 255); - --btn-color: rgb(100, 61, 136); - border: .25em solid var(--glow-color); - padding: 1em 3em; - color: var(--glow-color); - font-size: 15px; - font-weight: bold; - background-color: var(--btn-color); - border-radius: 1em; - outline: none; - box-shadow: 0 0 1em .25em var(--glow-color), - 0 0 4em 1em var(--glow-spread-color), - inset 0 0 .75em .25em var(--glow-color); - text-shadow: 0 0 .5em var(--glow-color); - position: relative; - transition: all 0.3s; -} - -button::after { - pointer-events: none; - content: ""; - position: absolute; - top: 120%; - left: 0; - height: 100%; - width: 100%; - background-color: var(--glow-spread-color); - filter: blur(2em); - opacity: .7; - transform: perspective(1.5em) rotateX(35deg) scale(1, .6); + display: flex; + align-items: center; + justify-content: center; + outline: none; + cursor: pointer; + width: 150px; + height: 50px; + background-image: linear-gradient(to top, #D8D9DB 0%, #fff 80%, #FDFDFD 100%); + border-radius: 30px; + border: 1px solid #8F9092; + transition: all 0.2s ease; + font-family: "Source Sans Pro", sans-serif; + font-size: 14px; + font-weight: 600; + color: #606060; + text-shadow: 0 1px #fff; } button:hover { - color: var(--btn-color); - background-color: var(--glow-color); - box-shadow: 0 0 1em .25em var(--glow-color), - 0 0 4em 2em var(--glow-spread-color), - inset 0 0 .75em .25em var(--glow-color); + box-shadow: 0 4px 3px 1px #FCFCFC, 0 6px 8px #D6D7D9, 0 -4px 4px #CECFD1, 0 -6px 4px #FEFEFE, inset 0 0 3px 3px #CECFD1; } button:active { - box-shadow: 0 0 0.6em .25em var(--glow-color), - 0 0 2.5em 2em var(--glow-spread-color), - inset 0 0 .5em .25em var(--glow-color); + box-shadow: 0 4px 3px 1px #FCFCFC, 0 6px 8px #D6D7D9, 0 -4px 4px #CECFD1, 0 -6px 4px #FEFEFE, inset 0 0 5px 3px #999, inset 0 0 30px #aaa; } + +button:focus { + box-shadow: 0 4px 3px 1px #FCFCFC, 0 6px 8px #D6D7D9, 0 -4px 4px #CECFD1, 0 -6px 4px #FEFEFE, inset 0 0 5px 3px #999, inset 0 0 30px #aaa; +} + + + .modal-overlay {