Animated Buttons For Blogger Posts

Buttons are very essential for any blog and they make blog beautiful. There is no option for adding buttons in Blogger. But its very easy to make your own button in Blogger for different purpose like download button, info button, submit button etc.



Animated Buttons

Here is a list of animated buttons that you can add in your blog to make it beautiful.




Pressed Effect








  • In blogger post copy and paste this HTML code in HTML mode.
<button class="button">Click Me</button>

  • Now paste this code in
Template > Customise > Advanced > Add CSS

 .button {
  padding: 15px 25px;
  font-size: 24px;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #fff;
  background-color: #000;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}
.button:hover {background-color: #333333}
.button:active {
  background-color: #ccc;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}


Ripple Effect




CSS code of this effect:-

.button {
position: relative;
background-color: #191919;
border: none;
font-size: 15px;
color: #FFFFFF;
padding: 20px;
width: 150px;
text-align: center;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
}
.button:after {
content: "";
background: #4C4C4C;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px!important;
margin-top: -120%;
opacity: 0;
transition: all 0.8s
}
.button:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s
}

Animated Hover Button




CSS code for this effect

.button {
  border-radius: 4px;
  background-color: #191919;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 15px;
  padding: 20px;
  width: 120px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}
.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.button span:after {
  content: '»';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}
.button:hover span {
  padding-right: 25px;
}
.button:hover span:after {
  opacity: 1;
  right: 0;
}

If you want more buttons then you can leave your comment below and I will add some more cool button effects in my other post.

I like blogging as much as I like coding and designing though not more than traveling.
If I'm not here publishing stuff then you will find me researching about SEO and marketing.
Love to meet new people and try to help every person.
Find me interesting or have any issue?
Shoot a message and I'll be with you.

3 comments:

  1. your Slider About Information Is A very Good Nice Work Bro..
    And Thank You
    https://thebrandcollection.blogspot.com/

    ReplyDelete
  2. great post it helps me alot in building my own sawing website

    ReplyDelete
  3. Its help me a lot to make my Technology site
    More Look Thanks, Man!

    ReplyDelete

Don't forget to check 'Notify me' box to get notification of reply.