https://github.com/parisa-singh/hovering-buttons-showcase
A simple and visually appealing website showcasing a variety of buttons when hovered over has unique hover animations.
https://github.com/parisa-singh/hovering-buttons-showcase
buttons-collection html styling-css
Last synced: 7 months ago
JSON representation
A simple and visually appealing website showcasing a variety of buttons when hovered over has unique hover animations.
- Host: GitHub
- URL: https://github.com/parisa-singh/hovering-buttons-showcase
- Owner: parisa-singh
- Created: 2025-02-04T18:53:52.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-05T23:29:22.000Z (about 1 year ago)
- Last Synced: 2025-05-13T18:45:34.720Z (9 months ago)
- Topics: buttons-collection, html, styling-css
- Language: CSS
- Homepage: https://parisa-singh.github.io/hovering-buttons-showcase/
- Size: 3.91 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Hovering Buttons Showcase
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.
---
## Features
### Buttons:
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.
---
## Files Included
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.
---
## Setup and Usage
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.
---
## Customization
- **Button Colors and Effects**:
- Each button's style can be modified in `styles.css`. Feel free to experiment with colors, gradients, and hover effects.
---
## Technologies Used
- **HTML**: For creating the webpage structure.
- **CSS**: For styling the buttons and adding hover animations.
---
## Preview
- The background uses a gradient, and the buttons are styled to create an interactive and modern look.
---
## Future Improvements
- Add more buttons with advanced animations.
- Make the website responsive for mobile devices.
- Implement JavaScript for dynamic interactions.
---
## License
This project is free to use and modify for personal or educational purposes.