Animated Buttons For Blogger Posts

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.
sdzdsds

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. The Collection23 August 2018 at 00:21

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

    ReplyDelete
  2. Anonymous18 March 2019 at 16:32

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

    ReplyDelete
  3. Pavan26 May 2020 at 20:36

    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.

Subscribe to: Post Comments (Atom)