How to use beautiful gradient button in blogger
Dhanjee Rider
Creating Stylish gradient Buttons with CSS
In this article we will provide for beautiful gradient button CSS for your link tag button you can simply add a class on your link and button are visible to you blog
Buttons are an essential part of web design, and giving them a unique style can make your website stand out. With the following CSS code, you can easily transform regular links into stylish buttons. Let's dive into how you can use this code.
Here's the HTML structure for creating buttons:
Look on the html class ๐
Demo ๐️
How to add these gradient button to your blogger website
Step 1:
<style>
.bt{background: linear-gradient(180deg, #47ff6f, #417ce0);
font-size: 23px;
color: white;
text-align: center;
padding: 10px 30px;
transition: all 0.15s ease-out;
border-radius: 100px;
text-decoration: none;
filter: drop-shadow(0 5px 7px rgba(0, 0, 0, 0.3));
font-weight: 500;
line-height: 3.4rem;
}
.bt:hover {
background: linear-gradient(180deg, #ff7147, #e0417f);
}
.bt1 {
font-size: 23px;
color: white;
text-align: center;
padding: 10px 30px;
transition: all 0.15s ease-out;
border-radius: 100px;
text-decoration: none;
filter: drop-shadow(0 5px 7px rgba(0, 0, 0, 0.3));
font-weight: 500;
background: linear-gradient(180deg, #ffb200, #ff3400);
filter: drop-shadow(0 15px 15px #00a1ff57);
line-height: 3.4rem;}
.bt2{
font-size: 23px;
color: white;
text-align: center;
padding: 10px 30px;
transition: all 0.15s ease-out;
border-radius: 100px;
text-decoration: none;
filter: drop-shadow(0 5px 7px rgba(0, 0, 0, 0.3));
font-weight: 500;
animation: cng 13s ease infinite;
background: linear-gradient(45deg, #00a1ff, #af4ae6);
line-height: 3.4rem;
filter: drop-shadow(0 15px 15px rgba(71, 255, 111, 0.4));
}
.bt3 {
font-size: 23px;
color: white;
text-align: center;
padding: 10px 30px;
transition: all 0.15s ease-out;
border-radius: 100px;
text-decoration: none;
filter: drop-shadow(0 5px 7px rgba(0, 0, 0, 0.3));
font-weight: 500;
background: linear-gradient(180deg, #00eaff, #ff00dc);
filter: drop-shadow(0 15px 15px #00a1ff57);
line-height: 3.4rem;}
.bt4{
font-size: 23px;
color: white;
text-align: center;
padding: 10px 30px;
transition: all 0.15s ease-out;
border-radius: 100px;
text-decoration: none;
filter: drop-shadow(0 5px 7px rgba(0, 0, 0, 0.3));
font-weight: 500;
background: linear-gradient(180deg, #e347ff, #7b41e0);
line-height: 3.4rem;}
@keyframes cng {
0% {
background-position: 100px;
}
50% {
background-position: 20px;
}
100% {
background-position: 100px;
}
}
/* for more codes code
visit - www.dktechnozone.in */
</style>
Step 2:
Use the classes mentioned above in your HTML link tags to create beautiful buttons. Customize the text and href attribute as needed. Now, you have the power to turn ordinary links into eye-catching buttons. Play around with different classes and styles to find the perfect look for your website's buttons. Enjoy the enhanced visual appeal and interactivity that these buttons bring to your web pages!
Happy coding ๐
Last word
In this post we will provided information about How to use beautiful gradient button in blogger , If you enjoy this post, kindly share it with your friends. For any queries, feel free to join our Telegram channel, where we share exclusive and informative content. Many valuable tips are exclusively available on our Telegram channel. Stay updated with your favorite source, DK Technozone.
