{"id":28100440,"url":"https://github.com/parisa-singh/hovering-buttons-showcase","last_synced_at":"2025-07-21T05:02:49.504Z","repository":{"id":275824981,"uuid":"927315132","full_name":"parisa-singh/hovering-buttons-showcase","owner":"parisa-singh","description":"A simple and visually appealing website showcasing a variety of buttons when hovered over has unique hover animations.","archived":false,"fork":false,"pushed_at":"2025-02-05T23:29:22.000Z","size":4,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-13T18:45:34.720Z","etag":null,"topics":["buttons-collection","html","styling-css"],"latest_commit_sha":null,"homepage":"https://parisa-singh.github.io/hovering-buttons-showcase/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/parisa-singh.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-02-04T18:53:52.000Z","updated_at":"2025-03-19T15:53:06.000Z","dependencies_parsed_at":null,"dependency_job_id":"cbd43cc1-e9b4-4e8a-bfb3-946779b77193","html_url":"https://github.com/parisa-singh/hovering-buttons-showcase","commit_stats":null,"previous_names":["parisa-singh/hovering-buttons-showcase"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/parisa-singh/hovering-buttons-showcase","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/parisa-singh%2Fhovering-buttons-showcase","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/parisa-singh%2Fhovering-buttons-showcase/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/parisa-singh%2Fhovering-buttons-showcase/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/parisa-singh%2Fhovering-buttons-showcase/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/parisa-singh","download_url":"https://codeload.github.com/parisa-singh/hovering-buttons-showcase/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/parisa-singh%2Fhovering-buttons-showcase/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266242053,"owners_count":23898100,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["buttons-collection","html","styling-css"],"created_at":"2025-05-13T18:34:51.148Z","updated_at":"2025-07-21T05:02:49.498Z","avatar_url":"https://github.com/parisa-singh.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Hovering Buttons Showcase\n\nThis 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.\n\n---\n\n## Features\n\n### Buttons:\n1. **Button 1 (Color Change)**: Changes background color on hover.\n2. **Button 2 (Corner Flip)**: Sliding light effect with a skewed overlay.\n3. **Button 3 (Outline + Color Change)**: Border color transition with a transparent background on hover.\n4. **Button 4 (Colour Gradient Shift)**: Gradient color shift on hover.\n5. **Button 5 (Uppercase with Expanding Spacing)**: Uppercase text with expanding letter spacing.\n6. **Button 6 (Rotation + Color Change)**: Rotates slightly and changes to a lighter background.\n7. **Button 7 (Shadow Effect)**: Elevates with a bold shadow effect.\n8. **Button 8 (Button Hover Fill)**: Minimal design with a border-fill effect.\n\n---\n\n## Files Included\n\n1. **index.html**\n   - The main HTML file containing the structure of the webpage.\n\n2. **styles.css**\n   - The CSS file containing all the styles and hover animations for the buttons.\n\n---\n\n## Setup and Usage\n\n1. **Download the Files**:\n   - Save the `index.html` and `styles.css` files in the same directory.\n\n2. **Open the Website**:\n   - Open the `index.html` file in your web browser to view the button showcase.\n\n---\n\n## Customization\n\n- **Button Colors and Effects**:\n  - Each button's style can be modified in `styles.css`. Feel free to experiment with colors, gradients, and hover effects.\n\n---\n\n## Technologies Used\n\n- **HTML**: For creating the webpage structure.\n- **CSS**: For styling the buttons and adding hover animations.\n\n---\n\n## Preview\n\n- The background uses a gradient, and the buttons are styled to create an interactive and modern look.\n\n---\n\n## Future Improvements\n\n- Add more buttons with advanced animations.\n- Make the website responsive for mobile devices.\n- Implement JavaScript for dynamic interactions.\n\n---\n\n## License\n\nThis project is free to use and modify for personal or educational purposes.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fparisa-singh%2Fhovering-buttons-showcase","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fparisa-singh%2Fhovering-buttons-showcase","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fparisa-singh%2Fhovering-buttons-showcase/lists"}