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://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: Apply Online

There are following four types of buttons:

1. Simple Button

Simple Button

2. Bluish Button 

Bluish Button

3. Round Button 

Round Button

4. Shadow Button

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.