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.
<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.
How to add beautiful buttons using pure CSS in Blogger?
]]></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.
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.
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.