How to Add a Shadow button in blogger post using HTML & CSS Code?

 

Everyone can build and publish their own blogs for free using Blogger, a well-known blogging platform. One of the key features of Blogger is the ability to customize the appearance of your blog by using HTML and CSS code. In this post, we will explain how to add a shadow button in a Blogger post using HTML and CSS code. If you want to create a new blogger website then you can review our post "How to start a blog step by step for beginners 2023" 

Step 1: Create the button HTML code

To create a button in HTML, you need to use the <button> tag. Here's an example of a basic button HTML code:

<button>Apply Online</button>

Step 2: Create the button CSS code

Now that you have created the button HTML code, you need to add some CSS code to style the button. You can add CSS code to your Blogger post by going to the Theme section in the Blogger dashboard and clicking on the Edit HTML button.

Here's an example of a basic CSS code to style the button:

button {
background: #5E5DF0;
border-radius: 999px;
box-shadow:#5E5DF0 0 10px 20px -10px;
box-sizing: border-box;
color: #FFFFFF;
cursor: pointer;
font-size: 16px;
font-weight: 700;
line-height: 24px;
opacity: 1;
outline: 0 solid transparent;
padding: 8px 18px;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
width: fit-content;
word-break: break-word;
border: 0;
}

Step 3: Add the button code to your Blogger post

To add the button to your Blogger post, you need to switch to the HTML editor in the post editor and paste the button HTML code where you want the button to appear. You can also add the CSS code to the CSS section in the Blogger dashboard to apply the styles to all buttons on your blog. The complete code is given below which you add a shadow button in a blogger post using HTML & CSS code:

<a href="https://www.techfreshguru.com/">
<button style="background: #5E5DF0;
  border-radius: 999px;
  box-shadow: #5E5DF0 0 10px 20px -10px;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  opacity: 1;
  outline: 0 solid transparent;
  padding: 8px 18px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  width: fit-content;
  word-break: break-word;
  border: 0;">
Apply Online </button></a>

Result: 

There are following four types of buttons:

1. Simple Button

2. Bluish Button 

3. Round Button 

4. Shadow Button

Download the code above button and click here

Conclusion

In this post, we explained how to add a shadow button in a Blogger post using HTML and CSS code. By following these steps, you can customize the appearance of your blog and add interactive elements to your posts. Remember to always test your code to make sure it works correctly and to back up your Blogger theme before making any changes.