An Interest In:
Web News this Week
- March 22, 2024
- March 21, 2024
- March 20, 2024
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
Some of Our Sources
- Slashdot
- Engadget
- Spoon Graphics
- Smashing Magazine
- Naldz Graphics
- CSS Globe
- Android Dissected
- Daily Now
- Dev To
- The Verge
Help Webnuz
Referal links:
March 24, 2022 02:49 pm GMT
Original Link: https://dev.to/frontendshape/css-button-for-beginners-ce4
CSS Button For Beginners
Today in this blog youll learn how to create simple button style css using only html & css. For this beginner CSS tutorial we will create button using simple css utility classes. Before we start you need to resetting margin and padding in CSS file.
* { margin: 0px; padding: 0px; box-sizing: border-box;}First you need to create .btn class in your css file for base style.
.btn { padding: 0.5rem 1.5rem; cursor: pointer; display: inline-block; text-decoration: none; font-weight: 400; border-style: none; border-radius: 0.25rem; }Next, you need to create .bg-blue or .bg-primary chose one of this. Then create .text-white class
.bg-blue { background-color: #0000ff;}.text-white { color: #fff;}Now use this classes in your html file.
<button class="text-white btn bg-blue">Button</button>
You can create more button.
style.css
* { margin: 0px; padding: 0px; box-sizing: border-box;}.btn { padding: 0.5rem 1.5rem; cursor: pointer; display: inline-block; text-decoration: none; font-weight: 400; border-style: none; border-radius: 0.25rem; }.bg-red { background-color: #ff0000;}.bg-green { background-color: #009933;}.bg-gray { background-color: #808080;}.bg-blue { background-color: #0000ff;}.bg-yellow { background-color: #ffff00;}.bg-indigo { background-color: #4b0082;}.bg-black { background-color: #000000;}.bg-white { background-color: #fff;}.text-white { color: #fff;}.text-black { color: #000000;}index.html
<button class="text-white btn bg-green">Button</button><button class="text-white btn bg-gray">Button</button><button class="text-black btn bg-yellow">Button</button><button class="text-white btn bg-blue">Button</button><button class="text-white btn bg-indigo">Button</button><button class="text-black bg-white btn">Button</button><button class="text-white bg-black btn">Button</button>
Original Link: https://dev.to/frontendshape/css-button-for-beginners-ce4
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To