This project is a simple and visually appealing website showcasing a variety of buttons when hovered over has unique hover animations. The website is built using HTML and CSS and demonstrates creative design concepts with interactive UI elements.

1. Button 1 (Color Change): Changes background color on hover.
2. Button 2 (Corner Flip): Sliding light effect with a skewed overlay.
3. Button 3 (Outline + Color Change): Border color transition with a transparent background on hover.
4. Button 4 (Colour Gradient Shift): Gradient color shift on hover.
5. Button 5 (Uppercase with Expanding Spacing): Uppercase text with expanding letter spacing.
6. Button 6 (Rotation + Color Change): Rotates slightly and changes to a lighter background.
7. Button 7 (Shadow Effect): Elevates with a bold shadow effect.
8. Button 8 (Button Hover Fill): Minimal design with a border-fill effect.

1. index.html

   • The main HTML file containing the structure of the webpage.

2. styles.css

   • The CSS file containing all the styles and hover animations for the buttons.

1. Download the Files:

   • Save the index.html and styles.css files in the same directory.

2. Open the Website:

   • Open the index.html file in your web browser to view the button showcase.

• Button Colors and Effects:
  • Each button's style can be modified in styles.css. Feel free to experiment with colors, gradients, and hover effects.

• HTML: For creating the webpage structure.
• CSS: For styling the buttons and adding hover animations.

• The background uses a gradient, and the buttons are styled to create an interactive and modern look.

• Add more buttons with advanced animations.
• Make the website responsive for mobile devices.
• Implement JavaScript for dynamic interactions.

This project is free to use and modify for personal or educational purposes.