Best stylish Download/Apply button html code for Blogger post - Easy way to create blogger button create with html cod.

Best stylish Download/Apply button html code for Blogger post - Easy way to create blogger button create with html cod.

Assalamu Alaikum wa Rahmatullah

Today i will sheare with you How to create a stylish button in blogger post. Let's see..

We often share links in our blogger posts or any site post. If we share these links through a button and clicking on the button takes us to the link, our post becomes more beautiful. Many of us want to make buttons like this. We can't because we don't know HTML code very well. So today I will share with you how you can add beautiful buttons to blogger posts.


Today I will give you some buttons with examples from here you can add the buttons to your website post only. By going to HTML mode and pasting the codes, the button will be created. Just change the link. If you want, you can change the color and text of the button.


To create the button I need to go into the HTML mode of my blogger post. 

Now given below are some button codes you can use them to create buttons. The button code is preceded by an example of a button.

This button cod is ... 

<div style="text-align: center;">
  <a href="https://www.google.com">
   <b> <button class="my-button">Apply</button> </b>
  </a>
</div>

<style>
  .my-button {
    background-image: linear-gradient(to bottom, #2ecc71, #00ccff);
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  }

  .my-button:hover {
    background-image: linear-gradient(to bottom, #27ae60, #2ecc71);
  }
</style>


Another button with 3d affact

The button cod is 

<div style="text-align: center;">
  <a href="https://www.example.com">
    <button class="my-button">Click me!</button>
  </a>
</div>

<style>
  .my-button {
    background-color: #3498db;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 5px 0px 0px #2980b9, 0px 8px 8px rgba(0, 0, 0, 0.3);
    transition: box-shadow 0.3s ease;
  }

  .my-button:hover {
    box-shadow: 0px 3px 0px 0px #2980b9, 0px 5px 5px rgba(0, 0, 0, 0.3);
  }
</style>

Here is another red type 3d button

|The button cod is 

<div style="text-align: center;">
  <a href="https://www.example.com">
    <button class="my-button">Click me!</button>
  </a>
</div>

<style>
  .my-button {
    background-image: linear-gradient(to bottom, #ff6b6b, #e74c3c);
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.3);
    transition: box-shadow 0.3s ease;
  }

  .my-button:hover {
    box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.3);
  }
</style>
Next Post Previous Post