https://github.com/adityamamta/shine-hover-btn

Hover Button with Gradient Transition and Icon Animation build with HTML & CSS
https://github.com/adityamamta/shine-hover-btn

button-animation frontend-web html-css web-development

Last synced: 5 days ago
JSON representation

Hover Button with Gradient Transition and Icon Animation build with HTML & CSS

• Host: GitHub
• URL: https://github.com/adityamamta/shine-hover-btn
• Owner: adityamamta
• Created: 2024-11-23T07:21:28.000Z (about 1 month ago)
• Default Branch: main
• Last Pushed: 2024-11-23T07:27:47.000Z (about 1 month ago)
• Last Synced: 2024-11-23T08:22:21.553Z (about 1 month ago)
• Topics: button-animation, frontend-web, html-css, web-development
• Language: CSS
• Homepage: https://adityamamta.github.io/shine-hover-btn/
• Size: 252 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Hover Button with Gradient Transition and Icon Animation

## 

This project demonstrates a **responsive hover button** with a smooth gradient transition and animated icon on hover. The button changes its background gradient and displays a sliding animation with a calendar icon. On hover, the button reveals a new text ("Pick your plan") and a shiny blur effect is applied using the `::after` pseudo-element.

### Features:

- **Gradient Transition**: The button's background smoothly transitions between two colors on hover.

- **Icon Animation**: The icon rotates and becomes visible when hovering over the button.

- **Text Change**: The button text changes dynamically on hover, with a smooth sliding effect.

- **Shiny Blur Effect**: A glowing blur effect appears beside the button when hovered.

### 💼 Contact me 

- linkedin. [Linkedin](https://www.linkedin.com/in/adityamamta/)

- Email: [email protected]