From 156762ab94a5ed0eeacfe2c0bc439e1b8dd5f8fa Mon Sep 17 00:00:00 2001 From: anu-ushka Date: Thu, 30 Oct 2025 10:43:39 +0530 Subject: [PATCH 1/2] Added Pulsing Button Project --- Pulsing Button/README.md | 2 ++ Pulsing Button/index.html | 14 ++++++++++++++ Pulsing Button/style.css | 39 +++++++++++++++++++++++++++++++++++++++ 3 files changed, 55 insertions(+) create mode 100644 Pulsing Button/README.md create mode 100644 Pulsing Button/index.html create mode 100644 Pulsing Button/style.css diff --git a/Pulsing Button/README.md b/Pulsing Button/README.md new file mode 100644 index 00000000..65d107a4 --- /dev/null +++ b/Pulsing Button/README.md @@ -0,0 +1,2 @@ +A simple CSS-only pulsing button effect created without using JavaScript. +The button expands and fades out smoothly to give a glowing pulse animation. \ No newline at end of file diff --git a/Pulsing Button/index.html b/Pulsing Button/index.html new file mode 100644 index 00000000..2555dcb2 --- /dev/null +++ b/Pulsing Button/index.html @@ -0,0 +1,14 @@ + + + + + + Pulsing Button + + + +
+ +
+ + diff --git a/Pulsing Button/style.css b/Pulsing Button/style.css new file mode 100644 index 00000000..1c20905c --- /dev/null +++ b/Pulsing Button/style.css @@ -0,0 +1,39 @@ +body { + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + background: #323439; /* dark navy bg */ + font-family: "Poppins", sans-serif; +} + +.pulse-btn { + background: rgba(197, 250, 159, 0.7); /* pink-red */ + color: white; + border: none; + border-radius: 50px; + padding: 16px 40px; + font-size: 1.2rem; + cursor: pointer; + text-transform: uppercase; + letter-spacing: 1px; + box-shadow: 0 0 0 0 rgba(197, 250, 159, 0.7); + animation: pulse 1.5s infinite; + transition: transform 0.2s ease-in-out; +} + +.pulse-btn:hover { + transform: scale(1.05); +} + +@keyframes pulse { + 0% { + box-shadow: 0 0 0 0 rgba(197, 250, 159, 0.7); + } + 70% { + box-shadow: 0 0 0 20px rgba(225, 29, 72, 0); + } + 100% { + box-shadow: 0 0 0 0 rgba(225, 29, 72, 0); + } +} From ab96ad9f5127742107c92a1976fab0d321eb4c94 Mon Sep 17 00:00:00 2001 From: anu-ushka Date: Thu, 30 Oct 2025 10:57:01 +0530 Subject: [PATCH 2/2] Added Sliding Underline on Hover Project --- sliding_underline/README.md | 3 +++ sliding_underline/index.html | 17 ++++++++++++++++ sliding_underline/style.css | 38 ++++++++++++++++++++++++++++++++++++ 3 files changed, 58 insertions(+) create mode 100644 sliding_underline/README.md create mode 100644 sliding_underline/index.html create mode 100644 sliding_underline/style.css diff --git a/sliding_underline/README.md b/sliding_underline/README.md new file mode 100644 index 00000000..44a4a50f --- /dev/null +++ b/sliding_underline/README.md @@ -0,0 +1,3 @@ + +A simple CSS-only navigation link animation. +When hovered, a smooth underline slides in from left to right — no JavaScript used. \ No newline at end of file diff --git a/sliding_underline/index.html b/sliding_underline/index.html new file mode 100644 index 00000000..28642d36 --- /dev/null +++ b/sliding_underline/index.html @@ -0,0 +1,17 @@ + + + + + + Sliding Underline on Hover + + + + + + diff --git a/sliding_underline/style.css b/sliding_underline/style.css new file mode 100644 index 00000000..0298b7e5 --- /dev/null +++ b/sliding_underline/style.css @@ -0,0 +1,38 @@ +body { + background-color: #0f172a; + color: white; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + font-family: "Poppins", sans-serif; +} + +.nav { + display: flex; + gap: 2rem; +} + +.nav a { + position: relative; + text-decoration: none; + color: #f1f5f9; + font-size: 1.2rem; + letter-spacing: 0.5px; + padding-bottom: 4px; +} + +.nav a::after { + content: ""; + position: absolute; + left: 0; + bottom: 0; + width: 0%; + height: 2px; + background-color: #38bdf8; + transition: width 0.3s ease; +} + +.nav a:hover::after { + width: 100%; +}