https://github.com/yashi-singh-1/day-10-animated-css-button

🚀 A collection of unique and trendy animated CSS buttons to enhance user experience and add visual appeal to your web projects. Each button showcases a different animation effect.
https://github.com/yashi-singh-1/day-10-animated-css-button

css css3 flip-button front-end front-end-challenge front-end-development frontend frontend-challenge frontend-development glow-button html html5 pulse-button ripple-button rotate-button wave-button

Last synced: 3 months ago
JSON representation

🚀 A collection of unique and trendy animated CSS buttons to enhance user experience and add visual appeal to your web projects. Each button showcases a different animation effect.

• Host: GitHub
• URL: https://github.com/yashi-singh-1/day-10-animated-css-button
• Owner: Yashi-Singh-1
• Created: 2024-06-21T06:16:21.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-06-21T06:23:00.000Z (over 1 year ago)
• Last Synced: 2024-11-10T11:15:22.941Z (11 months ago)
• Topics: css, css3, flip-button, front-end, front-end-challenge, front-end-development, frontend, frontend-challenge, frontend-development, glow-button, html, html5, pulse-button, ripple-button, rotate-button, wave-button
• Language: CSS
• Homepage:
• Size: 203 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          

Day 10: Animated CSS Buttons

Welcome to Day 10 of our CSS animation challenge! This repository contains a collection of unique and trendy animated CSS buttons. Each button showcases a different animation effect to enhance the user experience and add visual interest to your web projects.


Demo

You can view a live demo of the buttons here.


Preview Image

![Preview Image](preview.png)

Buttons Included



    
Wave Button

    
Glow Button

    
Pulse Button

    
Flip Button

    
Ripple Button

    
Rotate Button



Project Structure


Day-10-Animated-CSS-Button/

├── index.html

├── styles.css

└── README.md



Getting Started

To get a local copy up and running, follow these simple steps.


Prerequisites

You will need a modern web browser and a text editor.


Installation



    
Clone the repository:

        
git clone https://github.com/Yashi-Singh-1/Day-10-Animated-CSS-Button.git

    

    
Navigate to the project directory:

        
cd Day-10-Animated-CSS-Button

    

    
Open index.html in your web browser to see the animated buttons in action.



Usage

Each button is styled using CSS animations and transitions. You can integrate these buttons into your own projects by copying the relevant HTML and CSS code.


Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.



    
Fork the Project

    
Create your Feature Branch (git checkout -b feature/YourFeature)

    
Commit your Changes (git commit -m 'Add some YourFeature')

    
Push to the Branch (git push origin feature/YourFeature)

    
Open a Pull Request



Contact

Yashi Singh - www.linkedin.com/in/yashi-singh-b4143a246




Thanks for checking out this project! Enjoy the animations and happy coding!