Glad to see you want to contribute to this project!
Note
We donot expect Modified CSS button of existing button.
Avoid duplicate contributions, please check if a button already exists before contributing.
- Setup this project
- Rules to follow when contributing
- Add your button to this repo
- How to ask help?
- Report a bug/feature request
To start contributing, follow the below guidelines:
-
Fork this repository.
-
Clone your forked copy of the project.
git clone https://github.com/<your_username>/css-buttons.git
-
Navigate to the directory
css-buttons
.cd css-buttons
-
Add a reference (remote) to the original repository.
git remote add upstream https://github.com/Design-and-Code/css-buttons.git
-
Check the remotes for this repository.
git remote -v
-
Always take a pull from the upstream repository to your main branch to keep it up to date with the main project (updated repository).
git pull upstream main
-
Create a new branch.
git checkout -b <your_branch_name>
- Please follow naming convention for button classes. (Eg. yourname-btn-index aka rajkumar-btn-1)
- 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.
- Add your HTML code in the index.html file.
- Add your CSS code in the buttons.css file.
- Make sure you do not change any other button's code.
- For naming css classes use the correct naming conventions - eg. yourname-btn-index or btn-yourname-index.
- When you open the PR, please include a full screenshot.
- See below demo code to know how to add your button.
<!-- your-github-username-btn-1 start -->
<div class="button-container">
<!-- add your buttons here, eg.-->
<button class="{your-github-username-btn-index}">
<span class="{your-github-username-btn-index}"> Example Button </span>
</button>
<div class="createdby-section">
Created by
<a href="{your-github-link}">{your-github-username}</a>
</div>
</div>
<!-- your-github-username-btn-1 end -->
So it will look like this
<!-- Rajkumar-justcoder-btn-1 start -->
<div class="button-container">
<!-- add your buttons here, eg.-->
<button class="rajkumar-justcoder-btn-1">
<span class="rajkumar-justcoder-btn-1-span"> Example Button </span>
</button>
<div class="createdby-section">
Created by
<a href="link">Rajkumar-justcoder</a>
</div>
</div>
<!-- Rajkumar-justcoder-btn-1 end -->
- Also if u use any tag like span or div etc then your should have class-name like this:
your_github_username-btn-index-span/text/div
(example:rajkumar-justcoder-btn-1-span
) as u can see in above given demo code. - If using keyframes/animation in css then keyframe name also should be like this:
your_github_username-btn-index-rotate
(example:rajkumar-justcoder-btn-1-rotate
)
-
Track your changes ✔.
git add .
-
Commit your changes.
git commit -m "Relevant message"
-
Push the committed changes in your feature branch to your remote repo.
git push -u origin <your_branch_name>
-
To create a pull request, click on
Compare & pull requests
. -
Add appropriate title and description to your pull request explaining your changes and efforts done.
-
Click on
Create pull request
. -
Voilà! You have made a PR to css-buttons 💥. Wait for your submission to be accepted and your PR to be merged.
If you need help, you can join our discord server.
If you find a security vulnerability, do NOT open an issue. Email us instead.
If you find yourself wishing for a feature that doesn't exist in css-buttons, you are probably not alone. Open an issue on our issues list on GitHub which describes the feature you would like to see, why you need it, and how it should work.
- Head over to issues tab.
- Click on
New issue
in top right corner. - Add appropriate title and description to your issue.
A good bug report shouldn't leave others needing to chase you up for more information. Please try to be as detailed as possible in your report.
- What is your environment?
- What steps will reproduce the issue?
- What browser(s) and OS experience the problem?
- What would you expect to be the outcome?
- Provide adequate screenshots/log for the bug.
All these details will help developers to fix any potential bugs.
Feature requests are welcome. But take a moment to find out whether your idea fits with the scope and aims of the project. It's up to you to make a strong case to convince the project's developers of the merits of this feature. Please provide as much detail and context as possible.