diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..f673a71b7 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5502 +} \ No newline at end of file diff --git a/Projects/glowing button effect/index.html b/Projects/glowing button effect/index.html new file mode 100644 index 000000000..b9c9c2148 --- /dev/null +++ b/Projects/glowing button effect/index.html @@ -0,0 +1,19 @@ + + + + + + Document + + + + + + + + + + + + + \ No newline at end of file diff --git a/Projects/glowing button effect/style.css b/Projects/glowing button effect/style.css new file mode 100644 index 000000000..7ccad2e94 --- /dev/null +++ b/Projects/glowing button effect/style.css @@ -0,0 +1,74 @@ +* {margin: 0; + padding: 0; + box-sizing: border-box;} + body {display: flex; + flex-direction: column; + gap: 1rem; + align-items: center; + justify-content: center; + min-height: 100vh; + background: #151f28;} + .btn{margin-bottom: 15px;} + button {position: relative; + background: #444; + color: #fff; + text-decoration: none; + text-transform: uppercase; + border: none; + letter-spacing: 0.1rem; + font-size: 1rem; + padding: 1rem 3rem; + transition: 0.2s;} + button:hover { + letter-spacing: 0.2rem; + padding: 1.1rem 3.1rem; + background: var(--clr); + color: var(--clr); + /* box-shadow: 0 0 35px var(--clr); */ + animation: box 3s infinite;} + button::before { + content: ""; + position: absolute; + inset: 2px; + background: #272822;} + button span { + position: relative; + z-index: 1;} + button i { + position: absolute; + inset: 0; + display: block;} + button i::before { + content: ""; + position: absolute; + width: 10px; + height: 2px; + left: 80%; + top: -2px; + border: 2px solid var(--clr); + background: #272822; + transition: 0.2s;} + button:hover i::before { + width: 15px; + left: 20%; + animation: move 3s infinite;} + button i::after { + content: ""; + position: absolute; + width: 10px; + height: 2px; + left: 20%; + bottom: -2px; + border: 2px solid var(--clr); + background: #272822; + transition: 0.2s;} + button:hover i::after { + width: 15px;left: 80%;animation: move 3s infinite;} + @keyframes move { + 0% {transform: translateX(0);} + 50% {transform: translateX(5px);} + 100% {transform: translateX(0);}} + @keyframes box { + 0% {box-shadow: #27272c;} + 50% {box-shadow: 0 0 25px var(--clr);} + 100% {box-shadow: #27272c;}} \ No newline at end of file