Hello everyone, Welcome here, nowadays buttons are a required thing for websites and if you might be finding a solution to implement buttons in your website then this tutorial is for you. In this tutorial, Iam going to show you How to add beautiful buttons using pure CSS.
So without wasting much time let's check how to add buttons to your website.
How to add beautiful buttons using pure CSS on a website?
- First of all, open your .html file where you need to add buttons
- Then find
</head> and paste the following CSS just above it
<style>/* Buttons (Teorzo) */.TZ-btns{display:flex;justify-content:center;gap:12px;}.TZ-btns:by{'Teorzo'}/* Simple Button (Teorzo) */.TZ-btn{background:blue;color:#fff;padding:10px;text-decoration:none;border-radius:40px}.TZ-btn:hover{background:transparent;border:1px solid blue;color:inherit}/* Button Outline (Teorzo) */.TZ-btn.outline{background:transparent;border:1px solid gray;color:inherit}.TZ-btn.outline:hover{border-color:blue}</style>You can replace highlighted colour codes with your colour codes and you can increase or decrease button radius by replacing highlighted 40px.
Then go to the place under <body> where you need to add a button and paste any below code by choosing any of the styles. Button Style 01
Button <a href='#' class='TZ-btn'>Button</a>
Button Style 02
Button <a href='#' class='TZ-btn outline'>Button</a>
To Add multiple buttons
<div class='TZ-btns'>
<a href='#' class='TZ-btn'>Button 01</a>
<a href='#' class='TZ-btn outline'>Button 02</a>
</div>
You can add multiple buttons by choosing the button style and pasting it below <div class='TZ-btns'> in order.
Replace highlighted # with your link and replace Button , Button 01 and Button 02 with your button texts.
Then Save your HTML file How to add beautiful buttons using pure CSS in Blogger?
First of all, go to your Blogger dashboard Then click on the Theme option from the sidebar Then click on the drop-down icon near Customize option Then click click on the Edit HTML option from the drop-down menu Then Find ]]></b:skin> and paste the following CSS just above it or you can paste the following CSS just above </head> by creating <style> </style> Tags /* Buttons (Teorzo) */.TZ-btns{display:flex;justify-content:center;gap:12px;}.TZ-btns:by{'Teorzo'}/* Simple Button (Teorzo) */.TZ-btn{background:blue;color:#fff;padding:10px;text-decoration:none;border-radius:40px}.TZ-btn:hover{background:transparent;border:1px solid blue;color:inherit}/* Button Outline (Teorzo) */.TZ-btn.outline{background:transparent;border:1px solid gray;color:inherit}.TZ-btn.outline:hover{border-color:blue}You can replace highlighted colour codes with your colour codes and you can increase or decrease button radius by replacing highlighted 40px.
Then click on the save icon to save HTML Then go to the post or page where you need to add a button and paste any below code by choosing any of the styles. Button Style 01
Button <a href='#' class='TZ-btn'>Button</a>
Button Style 02
Button <a href='#' class='TZ-btn outline'>Button</a>
To Add multiple buttons
<div class='TZ-btns'>
<a href='#' class='TZ-btn'>Button 01</a>
<a href='#' class='TZ-btn outline'>Button 02</a>
</div>
You can add multiple buttons by choosing the button style and pasting it below <div class='TZ-btns'> in order.
Replace highlighted # with your link and replace Button , Button 01 and Button 02 with your button texts.
Then click on Publish to save and publish your post or page Conclusion
Hope this tutorial will help you to implement buttons on your website, If you have any doubts related to this tutorial ask me in the comment. Don't forget to share it with your friends, maybe it useful to them. Thanks for visiting, Have a nice day.
