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.

How to use beautiful gradient button in blogger

Here's the HTML structure for creating buttons:

<a class="bt" href="#"> Button </a>

<a class="bt1" href="#"> Button </a>

<a class="bt2" href="#"> Button </a>

<a class="bt3" href="#"> Button </a>

<a class="bt4" href="#"> Button </a>

tag used for showing button 1 by 1 vertically iff you are adding only one button so you don't need to add br tag.

Look on the html class 👀

You can add any of the five classes (bt, bt1, bt2, bt3, bt4) to your link tag to achieve different button styles. For example, to create a button with the style of bt3, you would add the class like this:

<a class="bt3" href="#">Button</a>

Demo 👁️

Button
Button
Button
Button
Button

How to add these gradient button to your blogger website

Step 1:

Copy and paste the following CSS code above the </head> from your theme then "Edit HTML" section:

<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 😁

Feel free to customize the text or add more details as needed for your specific use case.

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.

Dhanjee Rider

Dk Technozone An Editor,Programmer, grafix Designer Website Designer,Android Geek, Instagram Filter Seller,Blloger, Seo Expert, Wordpress Geek etc. Telegram