Skip to content

Sumit-14Singh/css-buttons

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

CSS Buttons

A collection of simple and subtle CSS-only hover animations for buttons. ✨

Maintenance PRs Welcome Open Source Love svg1 contributions welcome issues

Design

Some rules to follow when Contributing:

  • Please follow naming convention for button classes. (Eg. yourname-btn-index or btn-yourname-index)
  • Do not change default buttons maked with the button-def class.
  • Do not change any code in the index.html file except for button section.
  • Do not change any code in the assets folder.

How to contribute by adding more buttons

  1. Fork the repo and clone it.
  2. Add your HTML code in the index.html file.
  3. Add your CSS code in the buttons.css file.
  4. Make sure you do not change any other button's code.
  5. For naming css classes use the correct naming conventions - eg. yourname-btn-index or btn-yourname-index.
  6. When you open the PR, please include a full screenshot.

Demo code

    <div class="button-container">
            <!-- add your buttons here, eg.-->
            <button class="{yourname-button-index}"><span> Example Button </span></button>
            <div class="createdby-section">
                Created by
                <a href="{yourgithublink}">{YOURNAME}</a>
            </div>
    </div>

Folder Structure

root
├── assets
│   ├── script.js
│   └── css
│       └── style.css
│   
├── buttons
│   └── buttons.css
└── index.html

About

Various button hover effects made fully in HTML and CSS.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • CSS 64.6%
  • HTML 35.4%