diff --git a/README.md b/README.md index 12a2b0c..f0aab6b 100644 --- a/README.md +++ b/README.md @@ -8,43 +8,44 @@ --- -| Project Name | Links | -| ----------------------------- | -------------------------------------------------------- | -| Background Slider | https://pulkit203.github.io/Background-Slider/ | -| Bubble Animation | https://iamtushar11.github.io/Bubble-animation/ | -| 3D-Image-Rotation Animation | https://pulkit203.github.io/3d-image-rotation/ | -| Car Moving Animation | https://pulkit203.github.io/Car-moving-animation/ | -| Clock-Animation | https://pulkit203.github.io/Clock-Animation/ | -| Drive Parallax Animation | https://pulkit203.github.io/Drive-Parallex/ | -| 2D to 3D animation | https://pulkit203.github.io/3d-image-Animation/ | -| Hamburger Animation | https://pulkit203.github.io/Hamburger-Menu/ | -| Loading Animation | https://pulkit203.github.io/Loading-Animation/ | -| Lamp Animation | https://iamtushar11.github.io/lamp-Animation/ | -| No Image Animation | https://iamtushar11.github.io/See-the-Pointer/ | -| Mode Toggler Animation | https://pulkit203.github.io/Mode-Toggler/ | -| Progress Animation | https://pulkit203.github.io/Progress-Animation/ | -| Progress Steps Animation | https://pulkit203.github.io/progress-steps/ | -| Rocket Travelling Animation | https://pulkit203.github.io/Rocket-Travelling/ | -| Rotating Navigation Animation | https://pulkit203.github.io/Rotating-Navigation/ | -| Shooting Stars Animation | https://pulkit203.github.io/Shooting-Stars/ | -| Solar Rotation Animation | https://pulkit203.github.io/Solar-rotation/ | -| Spring Animation | https://pulkit203.github.io/spiral-animation/ | -| Testimonial Animation | https://pulkit203.github.io/Testimonial/ | -| Water Animation | https://pulkit203.github.io/Water-animation/ | -| Wave Animation | https://pulkit203.github.io/Wave-Animation/ | -| Menu Hover effect Animation | https://lavishbansal17.github.io/Menu-Hover-Effect/ | -| Button Animation | https://palaksharma23.github.io/AnimatedButton/ | -| Ring of Fire | https://lavishbansal17.github.io/Ring-of-fire/ | -| Moon Light | https://iamtushar11.github.io/MoonLight-Parallex-Effect/ | -| Modal Animation | https://pulkit203.github.io/Modal-Animation/ | -| Gradient Drop Shadow | https://lavishbansal17.github.io/Gradient-Drop-Box/ | -| Text Animation Effect | https://lavishbansal17.github.io/Text-Animation-Effect/ | -| Animation Balls | https://pulkit203.github.io/Windows-Loading-Animation/ | -| Line Icon Effect | https://lavishbansal17.github.io/Line-Icon-Effect/ | -| Hamburger Animation | https://pulkit203.github.io/Hamburger-Animtion/ | -| Drop Effect | https://palaksharma23.github.io/Drop-Effect/ | -| Scroll Animation | https://pulkit203.github.io/Scroll-Animation/ | -| Shiny Button Hover Effect | https://lavishbansal17.github.io/Shiny-Button-Hover-Effect/| +| Project Name | Links | +| ----------------------------- | ----------------------------------------------------------- | +| Background Slider | https://pulkit203.github.io/Background-Slider/ | +| Bubble Animation | https://iamtushar11.github.io/Bubble-animation/ | +| 3D-Image-Rotation Animation | https://pulkit203.github.io/3d-image-rotation/ | +| Car Moving Animation | https://pulkit203.github.io/Car-moving-animation/ | +| Clock-Animation | https://pulkit203.github.io/Clock-Animation/ | +| Drive Parallax Animation | https://pulkit203.github.io/Drive-Parallex/ | +| 2D to 3D animation | https://pulkit203.github.io/3d-image-Animation/ | +| Hamburger Animation | https://pulkit203.github.io/Hamburger-Menu/ | +| Loading Animation | https://pulkit203.github.io/Loading-Animation/ | +| Lamp Animation | https://iamtushar11.github.io/lamp-Animation/ | +| No Image Animation | https://iamtushar11.github.io/See-the-Pointer/ | +| Mode Toggler Animation | https://pulkit203.github.io/Mode-Toggler/ | +| Progress Animation | https://pulkit203.github.io/Progress-Animation/ | +| Progress Steps Animation | https://pulkit203.github.io/progress-steps/ | +| Rocket Travelling Animation | https://pulkit203.github.io/Rocket-Travelling/ | +| Rotating Navigation Animation | https://pulkit203.github.io/Rotating-Navigation/ | +| Shooting Stars Animation | https://pulkit203.github.io/Shooting-Stars/ | +| Solar Rotation Animation | https://pulkit203.github.io/Solar-rotation/ | +| Spring Animation | https://pulkit203.github.io/spiral-animation/ | +| Testimonial Animation | https://pulkit203.github.io/Testimonial/ | +| Water Animation | https://pulkit203.github.io/Water-animation/ | +| Wave Animation | https://pulkit203.github.io/Wave-Animation/ | +| Menu Hover effect Animation | https://lavishbansal17.github.io/Menu-Hover-Effect/ | +| Button Animation | https://palaksharma23.github.io/AnimatedButton/ | +| Ring of Fire | https://lavishbansal17.github.io/Ring-of-fire/ | +| Moon Light | https://iamtushar11.github.io/MoonLight-Parallex-Effect/ | +| Modal Animation | https://pulkit203.github.io/Modal-Animation/ | +| Gradient Drop Shadow | https://lavishbansal17.github.io/Gradient-Drop-Box/ | +| Text Animation Effect | https://lavishbansal17.github.io/Text-Animation-Effect/ | +| Animation Balls | https://pulkit203.github.io/Windows-Loading-Animation/ | +| Line Icon Effect | https://lavishbansal17.github.io/Line-Icon-Effect/ | +| Hamburger Animation | https://pulkit203.github.io/Hamburger-Animtion/ | +| Drop Effect | https://palaksharma23.github.io/Drop-Effect/ | +| Scroll Animation | https://pulkit203.github.io/Scroll-Animation/ | +| Shiny Button Hover Effect | https://lavishbansal17.github.io/Shiny-Button-Hover-Effect/ | + --- ![Project Intro Gif](./Gif.gif) diff --git a/Shiny Button Hover Effect/index.html b/Shiny Button Hover Effect/index.html index c02c786..93a9137 100644 --- a/Shiny Button Hover Effect/index.html +++ b/Shiny Button Hover Effect/index.html @@ -1,14 +1,25 @@ - - - - + + + + Shiny Button Hover Effect - - - + + + Shiny Button Shiny Button - - \ No newline at end of file + + + diff --git a/Shiny Button Hover Effect/style.css b/Shiny Button Hover Effect/style.css index 6448f3d..c643c6d 100644 --- a/Shiny Button Hover Effect/style.css +++ b/Shiny Button Hover Effect/style.css @@ -1,44 +1,60 @@ -*{ - margin: 0; - padding: 0; - font-family: consoles; -} -body{ - display: flex; - justify-content: center; - min-height: 100vh; - align-items: center; - flex-direction: column; - background: #19011d; -} -a{ - position: relative; - padding: 15px 30px; - margin: 10px; - background: #35003d; - color: #fff; - text-decoration: none; - letter-spacing: 1px; - border: 1px solid #000; - transition: 0.5s; - overflow: hidden; -} -a:hover{ - background: #a41ee9; -} -a:nth-child(2):hover{ - background: #ff3c7f; -} -a::before{ - content: ''; - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - background: linear-gradient(90deg,transparent,#fff,transparent); - transition: 0.5s; -} -a:hover::before{ - left: 100%; -} \ No newline at end of file +* { + margin: 0; + padding: 0; + font-family: consoles; +} +body { + display: flex; + justify-content: center; + min-height: 100vh; + align-items: center; + flex-direction: column; + background: #19011d; +} +a { + position: relative; + padding: 15px 30px; + margin: 10px; + background: #35003d; + color: #fff; + text-decoration: none; + letter-spacing: 1px; + border: 1px solid #000; + transition: 0.5s; + overflow: hidden; +} +a:hover { + background: #a41ee9; +} +a:nth-child(2):hover { + background: #ff3c7f; +} +a::before { + content: ""; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, #fff, transparent); + transition: 0.5s; +} +a:hover::before { + left: 100%; +} +footer { + background: none !important; + position: absolute; + color: yellow; + bottom: 1rem; + left: 5rem; +} +footer a { + background: none; +} +footer a::before { + background: none; +} +footer a:hover { + background: none; +}