Animated buttons and images are the important part for blogspot blogs as they add extra shine to our blog posts and pages. Sometimes, we need to mentions the links for download, demo, install and much more but we provide the simple text with links and the process goes on.
Today, i am going to share the CSS3 animations, transitions and 3D effects for buttons and images that will give a different look to your blogger blogs. You can play much more with the property of CSS3.
Check out: How To Add Background Music | Audia file | Songs to Blogger
At the end of this tutorial, I have also mentioned how to install these effects to your blogger template.
Check out: How To Add Strip Slideshow Widget to Blogger
#1. Buttons with Hover Effects
View Effects
Click Here
CSS
.btn {
background-color: #800000;
text-align: center;
margin: 50px;
}
.btn {
position: relative;
font-size: 16px;
color: #fff;
text-decoration: none;
display: inline-block;
border: 3px solid #fff;
border-radius: 5px;
padding: 20px;
margin-top: 25px;
overflow:hidden;
font-family: Arial, sans-serif;
font-weight: 300;
transition: all 250ms ease-in-out;
span {
position: relative;
z-index: 1;
}
&:before {
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
margin-left: -100px;
margin-top: -100px;
content: '';
border-color: #fff;
border-style: solid;
border-width: 1px;
border-radius: 100px;
transform-origin: center center;
transition: all 250ms ease-in-out;
box-sizing: border-box;
}
&:hover {
color: #a6cfe3;
&:before {
border-width: 100px;
}
}
}
Markup
<a class="btn" href="/">
Click here
</a>
<span>Click here</span>
</a>
#2. Fill Effect on Hover
View Effects
Click Here
CSS
.btnstyle2 {
position: relative;
color: #fff;
line-height: 250px;
text-decoration: none;
border-radius: 5em;
padding: 15px 50px;
font-size: 2em;
font-family: 'Roboto', sans-serif;
font-weight: 100;
background: -webkit-linear-gradient(right, #336E7B 50%, #E26A6A 50%);
background: -moz-linear-gradient(right, #336E7B 50%, #E26A6A 50%);
background: -o-linear-gradient(right, #336E7B 50%, #E26A6A 50%);
background: linear-gradient(to left, #336E7B 50%, #E26A6A 50%);
background-size: 200% 100%;
background-position: left bottom;
transition: all 1s ease;
}
.btnstyle2:hover {
background-position: right bottom;
}
Markup
<a class="btnstyle2" href="https://www.knigulper">Hover Over Me</a>
#3. Underline Effect on Hover
View Effects
Click Here
CSS
.buttonstyle3 {
padding: 20px 60px;
font-size: inherit;
cursor: pointer;
font-weight: bold;
display: inline-block;
margin: 15px;
text-transform: uppercase;
letter-spacing: 1px;
position: relative;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
border: 3px solid #f45556;
color: #f45556;
overflow: hidden;
.buttonstyle3 :after {
content: '';
position: absolute;
z-index: 1;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
width: 100%;
height: 0;
top: 50%;
left: 50%;
background: #f45556;
opacity: 0;
-webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
-moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
-ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
.buttonstyle3:hover {
color: #fff;
.buttonstyle3:after {
opacity: 1;
height: 260%;
}
}
span {
position: relative;
z-index: 2;
}
}
Markup
<a class="buttonstyle3" href="/">
Download
</a>
<a class="buttonstyle3" href="/">
Demo
</a>
#4. Rounded Effect On Hover
View Effects
Click Here
CSS
.ca-menu{
padding:0;
margin:20px auto;
width: 1020px;
font-family: 'Dosis', sans-serif;
}
.ca-menu li{
width: 230px;
height: 230px;
border: 10px solid #f6f6f6;
overflow: hidden;
position: relative;
float:left;
background: #fff;
margin-right: 4px;
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
-webkit-border-radius: 125px;
-moz-border-radius: 125px;
border-radius: 125px;
-webkit-transition: all 400ms linear;
-moz-transition: all 400ms linear;
-o-transition: all 400ms linear;
-ms-transition: all 400ms linear;
transition: all 400ms linear;
}
.ca-menu li:last-child{
margin-right: 0px;
}
.ca-menu li a{
text-align: left;
width: 100%;
height: 100%;
display: block;
color: #333;
position: relative;
-moz-box-shadow:0px 0px 3px #000000;
-webkit-box-shadow:0px 0px 3px #000000;
box-shadow:0px 0px 3px #000000;
}
.ca-icon{
font-family: 'WebSymbolsRegular', cursive;
font-size: 40px;
color: #f6f6f6;;
line-height: 60px;
position: absolute;
width: 100%;
height: 60px;
left: 0px;
top: 30px;
text-align: center;
-webkit-transition: all 400ms linear;
-moz-transition: all 400ms linear;
-o-transition: all 400ms linear;
-ms-transition: all 400ms linear;
transition: all 400ms linear;
}
.ca-main{
font-size: 24px;
position: absolute;
top: 110px;
height: 80px;
width: 170px;
left: 50%;
margin-left: -85px;
opacity: 0.8;
text-align: center;
}
.ca-sub{
text-align:center;
color: #000;
font-size: 26px;
position: absolute;
height: 80px;
width: 170px;
left: 50%;
margin-left: -85px;
top: 110px;
opacity: 0;
-webkit-transition: all 400ms linear;
-moz-transition: all 400ms linear;
-o-transition: all 400ms linear;
-ms-transition: all 400ms linear;
transition: all 400ms linear;
}
.ca-menu li:hover{
background: #f7f7f7;
border-color: #fff;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
box-shadow: 0 45px 60px -50px #000000;
}
.ca-menu li:hover .ca-icon{
color: #555;
font-size: 60px;
}
.ca-menu li:hover .ca-main{
display: none;
}
.ca-menu li:hover .ca-sub{
116
opacity: 0.8;
}
Markup
<ul class="ca-menu">
<li>
<a href="/">
<span class="ca-icon">A</span>
<div class="ca-content">
<h2 class="ca-main">Exceptional Service</h2>
<h3 class="ca-sub">Personalized to your needs</h3>
</div>
</a>
</li>
<li>
<a href="/">
<span class="ca-icon">I</span>
<div class="ca-content">
<h2 class="ca-main">Creative Storytelling</h2>
<h3 class="ca-sub">Advanced use of technology</h3>
</div>
</a>
</li>
<li>
<a href="/">
<span class="ca-icon">C</span>
<div class="ca-content">
<h2 class="ca-main">Infographical Education</h2>
<h3 class="ca-sub">Understanding visually</h3>
</div>
</a>
</li>
<li>
<a href="/">
<span class="ca-icon">S</span>
<div class="ca-content">
<h2 class="ca-main">Sophisticated Team</h2>
<h3 class="ca-sub">Professionals in action</h3>
</div>
</a>
</li> </ul>
#5. Border Effect On Hover
View Effects
Click Here
CSS
.buttons5 {
background: red;
font-family: 'Roboto', sans-serif;
font-weight: 400;
}
.buttons5 {
display: table;
height: 100%;
width: 100%;
}
.buttons5-container {
display: table-cell;
padding: 1em;
text-align: center;
vertical-align: middle;
}
&:hover {
background: rgba(white, 1);
color: red;
}
}
}
//button styles
//default button
.btn {
color: #fff;
cursor: pointer;
display: block;
font-size:16px;
font-weight: 400;
line-height: 45px;
margin: 0 auto 2em;
max-width: 160px;
position: relative;
text-decoration: none;
text-transform: uppercase;
vertical-align: middle;
width: 100%;
&:nth-of-type(even) {
margin-right: 0;
}
}
&:nth-of-type(even) {
margin-right: 2.5em;
}
&:nth-of-type(5) {
margin-right: 0;
}
}
&:hover { text-decoration: none; }
}
/////////////////////////////////
//button one
///////////////////////////////
.btn-1 {
background: darken($red, 1.5%);
font-weight: 100;
svg {
height: 45px;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
rect {
fill: none;
stroke: #fff;
stroke-width: 2;
stroke-dasharray: 422, 0;
}
}
.btn-1:hover {
background: rgba($red, 0);
font-weight: 900;
letter-spacing: 1px;
rect {
stroke-width: 5;
stroke-dasharray: 15, 310;
stroke-dashoffset: 48;
transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
}
}
////////////////////////////
//button two
//////////////////////////
.btn-2 {
letter-spacing: 0;
}
.btn-2:hover,
.btn-2:active {
letter-spacing: 5px;
}
.btn-2:after,
.btn-2:before {
backface-visibility: hidden;
border: 1px solid rgba(#fff, 0);
bottom: 0px;
content: " ";
display: block;
margin: 0 auto;
position: relative;
transition: all 280ms ease-in-out;
width: 0;
}
.btn-2:hover:after,
.btn-2:hover:before {
backface-visibility: hidden;
border-color: #fff;
transition: width 350ms ease-in-out;
width: 70%;
}
.btn-2:hover:before {
bottom: auto;
top: 0;
width: 70%;
}
/////////////////////////////
//button -3
///////////////////////////
.btn-3 {
background: lighten($red, 3%);
border: 1px solid darken($red, 4%);
box-shadow: 0px 2px 0 darken($red, 5%), 2px 4px 6px darken($red, 2%);
font-weight: 900;
letter-spacing: 1px;
transition: all 150ms linear;
}
.btn-3:hover {
background: darken($red, 1.5%);
border: 1px solid rgba(#000, .05);
box-shadow: 1px 1px 2px rgba(#fff, .2);
color: lighten($red, 18%);
text-decoration: none;
text-shadow: -1px -1px 0 darken($red, 9.5%);
transition: all 250ms linear;
}
/////////////////////////////
//button-4
///////////////////////////
.btn-4 {
border: 1px solid;
overflow: hidden;
position: relative;
span {
z-index: 20;
}
&:after {
background: #fff;
content: "";
height: 155px;
left: -75px;
opacity: .2;
position: absolute;
top: -50px;
transform: rotate(35deg);
transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
width: 50px;
z-index: -10;
}
}
.btn-4:hover {
&:after {
left: 120%;
transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
}
}
Markup
<section class="buttons5">
<div class="buttons5-container">
<!--End of Button 1 -->
<a class="btn btn-2" href="/">Hover</a>
<!--End of Button 2 -->
<a class="btn btn-3" href="/">Hover</a>
<!--End of Button 3 -->
<a class="btn btn-4" href="/">Hover</a>
<!--End of Button 4 -->
<a class="btn btn-5" href="/">Hover</a>
<!--End of Button 5 -->
</div>
</section>
#6. Bubble Effect On Hover
View Effects
Click Here
CSS
.buttonz {
font: 15px Calibri, Arial, sans-serif;
/* A semi-transparent text shadow */
text-shadow: 1px 1px 0 rgba(255,255,255,0.4);
/* Overriding the default underline styling of the links */
text-decoration: none !important;
white-space: nowrap;
display: inline-block;
vertical-align: baseline;
position: relative;
cursor: pointer;
padding: 10px 20px;
background-repeat: no-repeat;
/* The following two rules are fallbacks, in case
the browser does not support multiple backgrounds. */
background-position: bottom left;
background-image: url('http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png');
/* Multiple backgrounds version. The background images
are defined individually in color classes */
background-position: bottom left, top right, 0 0, 0 0;
background-clip: border-box;
/* Applying a default border raidus of 8px */
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
/* A 1px highlight inside of the button */
-moz-box-shadow: 0 0 1px #fff inset;
-webkit-box-shadow: 0 0 1px #fff inset;
box-shadow: 0 0 1px #fff inset;
/* Animating the background positions with CSS3 */
/* Currently works only in Safari/Chrome */
-webkit-transition: background-position 1s;
-moz-transition: background-position 1s;
transition: background-position 1s;
}
.buttonz:hover {
/* The first rule is a fallback, in case the browser
does not support multiple backgrounds
*/
background-position: top left;
background-position: top left, bottom right, 0 0, 0 0;
}
.buttonz:active {
/* Moving the buttonz 1px to the bottom when clicked */
bottom: -1px;
}
/* The three buttons sizes */
.buttonz.big {
font-size: 30px;
}
.buttonz.medium {
font-size: 18px;
}
.buttonz.small {
font-size: 13px;
}
/* A more rounded button */
.buttonz.rounded {
-moz-border-radius: 4em;
-webkit-border-radius: 4em;
border-radius: 4em;
}
/* Defining four buttonz colors */
/* BlueButtonz */
.blue.buttonz {
color: #0f4b6d !important;
border: 1px solid #84acc3 !important;
/* A fallback background color */
background-color: #48b5f2;
/* Specifying a version with gradients according to */
background-image: url('http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png'), url('http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png'),
-moz-radial-gradient( center bottom, circle,
rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),
-moz-linear-gradient(#4fbbf7, #3faeeb);
background-image: url('http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png'), url('http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png'),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));
}
.blue.buttonz:hover {
background-color: #63c7fe;
background-image: url('http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png'), url('http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png'),
-moz-radial-gradient( center bottom, circle,
rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),
-moz-linear-gradient(#63c7fe, #58bef7);
background-image: url('http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png'), url('http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png'),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));
}
/* Green Buttonz */
.green.buttonz {
color: #345903 !important;
border: 1px solid #96a37b !important;
background-color: #79be1e;
background-image: url('http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png'), url('http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27, #74b317);
background-image: url('http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png'), url('http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(162,211,30,1)), to(rgba(162,211,30,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#82cc27), to(#74b317));
}
.green.buttonz:hover {
background-color: #89d228;
background-image: url('http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png'), url('http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31, #7fc01e);
background-image: url('http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png'), url('http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(183,229,45,1)), to(rgba(183,229,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#90de31), to(#7fc01e));
}
/* Orange Buttonz */
.orange.buttonz {
color: #693e0a !important;
border: 1px solid #bea280 !important;
background-color: #e38d27;
background-image: url('http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png'), url('http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f, #d4821f);
background-image: url('http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png'), url('http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(232,189,45,1)), to(rgba(232,189,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1982f), to(#d4821f));
}
.orange.buttonz:hover {
background-color: #ec9732;
background-image: url('http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png'), url('http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746, #e18f2b);
background-image: url('http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png'), url('http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(241,192,52,1)), to(rgba(241,192,52,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9a746), to(#e18f2b));
}
.gray.buttonz {
color: #525252 !important;
border: 1px solid #a5a5a5 !important;
background-color: #a9adb1;
background-image: url('http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png'), url('http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca, #92989c);
background-image: url('http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png'), url('http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(197,199,202,1)), to(rgba(197,199,202,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5c7ca), to(#92989c));
}
.gray.buttonz:hover {
background-color: #b6bbc0;
background-image: url('http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png'), url('http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6, #9fa5a9);
background-image: url('http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png'), url('http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(202,205,208,1)), to(rgba(202,205,208,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d3d6), to(#9fa5a9));
}
Markup
<div style="text-align: center;">
<a class="buttonz big green external_link" href="/" rel="nofollow" target="_blank">Big Size</a>
<a class="buttonz medium green external_link" href="/" rel="nofollow" target="_blank">Medium Size</a>
<a class="buttonz small green external_link" href="/" rel="nofollow" target="_blank">Small Size</a></div>
</div>
#7. Effect On Hover
View Effects
Click Here
CSS
.buttona {
display: inline-block;
height: 50px;
line-height: 50px;
padding-right: 30px;
padding-left: 70px;
position: relative;
background-color:rgb(41,127,184);
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 15px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
text-shadow:0px 1px 0px rgba(0,0,0,0.5);
-ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#ff123852,Positive=true)";zoom:1;
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#ff123852,Positive=true);
-moz-box-shadow:0px 2px 2px rgba(0,0,0,0.2);
-webkit-box-shadow:0px 2px 2px rgba(0,0,0,0.2);
box-shadow:0px 2px 2px rgba(0,0,0,0.2);
-ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=2,Color=#33000000,Positive=true)";
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=2,Color=#33000000,Positive=true);
}
.buttona span {
position: absolute;
left: 0;
width: 50px;
background-color:rgba(0,0,0,0.5);
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-right: 1px solid rgba(0,0,0,0.15);
}
.buttona:hover span, .button.active span {
background-color:rgb(0,102,26);
border-right: 1px solid rgba(0,0,0,0.3);
}
.buttona:active {
margin-top: 2px;
margin-bottom: 13px;
-moz-box-shadow:0px 1px 0px rgba(255,255,255,0.5);
-webkit-box-shadow:0px 1px 0px rgba(255,255,255,0.5);
box-shadow:0px 1px 0px rgba(255,255,255,0.5);
-ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#ccffffff,Positive=true)";
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#ccffffff,Positive=true);
}
.buttona.orange {
background: #FF7F00;
color:#FFFFFF;
}
.buttona.purple {
background: #8e44ad;
color:#FFFFFF;
}
.buttona.turquoise {
background: #1abc9c;
color:#FFFFFF;
}
.buttona.red {
background: #e74c3c;
color:#FFFFFF;
}
Markup
<a class="buttona orange active" href="/">✓Look I'm a Active Button</a>
<a class="buttona purple" href="/">✓Look I'm a button</a>
<a class="buttona turquoise" href="/">✓Look I'm a button</a>
<a class="buttona red" href="/">✓Look I'm a button</a>
#8. Effect On Click ON/OFF, Yes/NO
View Effects
Click Here
CSS
.cmn-toggle {
position: absolute;
margin-left: -9999px;
visibility: hidden;
}
.cmn-toggle + label {
display: block;
position: relative;
cursor: pointer;
outline: none;
user-select: none;
}
input.cmn-toggle-round + label {
padding: 2px;
width: 120px;
height: 60px;
background-color: #dddddd;
border-radius: 60px;
}
input.cmn-toggle-round + label:before,
input.cmn-toggle-round + label:after {
display: block;
position: absolute;
top: 1px;
left: 1px;
bottom: 1px;
content: "";
}
input.cmn-toggle-round + label:before {
right: 1px;
background-color: #f1f1f1;
border-radius: 60px;
transition: background 0.4s;
}
input.cmn-toggle-round + label:after {
width: 58px;
background-color: #fff;
border-radius: 100%;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
transition: margin 0.4s;
}
input.cmn-toggle-round:checked + label:before {
background-color: #8ce196;
}
input.cmn-toggle-round:checked + label:after {
margin-left: 60px;
}
input.cmn-toggle-round-flat + label {
padding: 2px;
width: 120px;
height: 60px;
background-color: #dddddd;
border-radius: 60px;
transition: background 0.4s;
}
input.cmn-toggle-round-flat + label:before,
input.cmn-toggle-round-flat + label:after {
display: block;
position: absolute;
content: "";
}
input.cmn-toggle-round-flat + label:before {
top: 2px;
left: 2px;
bottom: 2px;
right: 2px;
background-color: #fff;
border-radius: 60px;
transition: background 0.4s;
}
input.cmn-toggle-round-flat + label:after {
top: 4px;
left: 4px;
bottom: 4px;
width: 52px;
background-color: #dddddd;
border-radius: 52px;
transition: margin 0.4s, background 0.4s;
}
input.cmn-toggle-round-flat:checked + label {
background-color: #8ce196;
}
input.cmn-toggle-round-flat:checked + label:after {
margin-left: 60px;
background-color: #8ce196;
}
Markup
<div class="switch">
<input class="cmn-toggle cmn-toggle-round" id="cmn-toggle-1" type="checkbox" />
<label for="cmn-toggle-1"></label>
</div>
<div class="switch">
<input class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-4" type="checkbox" />
<label for="cmn-toggle-4"></label>
</div>
<div class="switch">
<input class="cmn-toggle cmn-toggle-yes-no" id="cmn-toggle-7" type="checkbox" />
<label data-off="No" data-on="Yes" for="cmn-toggle-7"></label>
</div>
#9. Stretch Effect On Hover
View Effects
Click Here
CSS
.forum {
display: inline-block;
border-radius: 6px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
width: 200px;
transition: all 0.7s;
cursor: pointer;
margin: 5px;
}
.forum span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.7s;
}
.forum span:after {
content: '»';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.7s;
}
.forum:hover span {
padding-right: 25px;
}
.forum:hover {
width: 300px;
}
.groupy {
display: inline-block;
border-radius: 14px;
background-color: #00FFFF;
border: none;
color: #FFFFFF;
text-align: center: color: #0000FF;
font-size: 18px;
padding: 10px;
width: 160px;
transition: all 0.7s;
cursor: pointer;
margin: 5px;
}
.groupy span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.7s;
}
.groupy span:after {
content: '»';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.7s;
}
.groupy:hover span {
padding-right: 25px;
}
.groupy:hover {
width: 300px;
}
Markup
<a class="groupy" href="/">Groupy</a>
<a class="forum" href="/">Forum</a>
#10. Radius Effect On Hover
View Effects
Click Here
CSS
.box {
background: #2db34a;
border-radius: 6px;
cursor: pointer;
height: 95px;
line-height: 95px;
text-align: center;
transition-property: background, border-radius;
transition-duration: 1s;
transition-timing-function: linear;
width: 95px;
}
.box:hover {
background: #ff7b29;
border-radius: 50%;
}
Markup
<div class="box">
Box</div>
#11. 3D Effect On Hover
View Effects
Click Here
CSS
/*basic reset*/
* {margin: 0; padding: 0;}
/*forcing the body to take 100% height*/
html, body {min-height: 100%;}
/*a nice BG*/
body {
background: #544; /*fallback*/
background: linear-gradient(#544, #565);
}
/*Thumbnail Background*/
.thumb {
width: 400px; height: 300px; margin: 70px auto;
perspective: 1000px;
}
.thumb a {
display: block; width: 100%; height: 100%;
/*double layered BG for lighting effect*/
background:
linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
url("http://thecodeplayer.com/u/m/i1.png");
/*disabling the translucent black bg on the main image*/
background-size: 0, cover;
/*3d space for children*/
transform-style: preserve-3d;
transition: all 0.5s;
}
.thumb:hover a {transform: rotateX(80deg); transform-origin: bottom;}
/*bottom surface */
.thumb a:after {
/*36px high element positioned at the bottom of the image*/
content: ''; position: absolute; left: 0; bottom: 0;
width: 100%; height: 36px;
/*inherit the main BG*/
background: inherit; background-size: cover, cover;
/*draw the BG bottom up*/
background-position: bottom;
/*rotate the surface 90deg on the bottom axis*/
transform: rotateX(90deg); transform-origin: bottom;
}
/*label style*/
.thumb a span {
color: white; text-transform: uppercase;
position: absolute; top: 100%; left: 0; width: 100%;
font: bold 12px/36px Montserrat; text-align: center;
/*the rotation is a bit less than the bottom surface to avoid flickering*/
transform: rotateX(-89.99deg); transform-origin: top;
z-index: 1;
}
/*shadow*/
.thumb a:before {
content: ''; position: absolute; top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.5);
box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);
transition: all 0.5s;
/*by default the shadow will be almost flat, very transparent, scaled down with a large blur*/
opacity: 0.15;
transform: rotateX(95deg) translateZ(-80px) scale(0.75);
transform-origin: bottom;
}
.thumb:hover a:before {
opacity: 1;
/*blurred effect using box shadow as filter: blur is not supported in all browsers*/
box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
/*pushing the shadow down and scaling it down to size*/
transform: rotateX(0) translateZ(-60px) scale(0.85);
}
Markup
<div class="thumb">
<!-- Image -->
<a href="/">
<!-- Label -->
Three-eyed Robot
</a>
</div>
#12. Blur Effect On Click
View Effects
Click Here
CSS
.botton {text-align:center;margin:10px!important;padding:10px!important;background-color: #000;font-size:24px;display:inline-block;text-decoration:none!important;color:#FFF!important; border: none;border-radius: 15px;box-shadow: 0 9px #999; cursor: pointer}
.botton:hover {background-color: #333333}
.botton:active {
background-color: #ccc;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
Markup
<botton class="botton">Click Me</botton>
#13. Ripple Effect On Hover
View Effects
Click Here
CSS
.ripple {
text-align: center;
display: inline-block;
padding: 4px 30px;
border-radius: 2px;
letter-spacing: .5px;
border-radius: 2px;
text-decoration: none;
color: #fff;
overflow: hidden;
position: relative;
z-index: 0;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
a.ripple{color:#FFF;text-decoration:none;font-family:”Roboto”,sans-serif}
a.yellow{color:#000}
.ripple:hover{box-shadow:0 5px 11px 0 rgba(0,0,0,0.18),0 4px 15px 0 rgba(0,0,0,0.15)}
.ink {
display: block;
position: absolute;
background: rgba(255, 255, 255, 0.4);
border-radius: 100%;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
}
.animate {
-webkit-animation: ripple 0.55s linear;
-moz-animation: ripple 0.55s linear;
-ms-animation: ripple 0.55s linear;
-o-animation: ripple 0.55s linear;
animation: ripple 0.55s linear;
}
.red{background-color:#F44336}
.pink{background-color:#E91E63}
.blue{background-color:#2196F3}
.cyan{background-color:#00bcd4}
.teal{background-color:#009688}
.yellow{background-color:#FFEB3B}
.orange{background-color:#FF9800}
.brown{background-color:#795548}
.grey{background-color:#9E9E9E}
.black{background-color:#000000}
Markup
<div style="text-align: center;">
<a class="ripple red" href="/">Red Button</a>
<a class="ripple pink" href="/">Pink Button</a>
<a class="ripple blue" href="/">Blue Button</a>
<a class="ripple cyan" href="/">Cyan Button</a>
<a class="ripple teal" href="/">Teal Button</a>
<a class="ripple yellow" href="/">Yellow Button</a>
<a class="ripple orange" href="/">Orange Button</a>
<a class="ripple brown" href="/">Brown Button</a>
<a class="ripple grey" href="/">Grey Button</a>
<a class="ripple black" href="/">Black Button</a>
</div>
#14. CSS3 3D Effect On Click
View Effects
Click Here
CSS
.btn3d {
transition:all .08s linear;
position:relative;
outline:medium none;
-moz-outline-style:none;
border:0px;
margin-right:10px;
margin-top:15px;
}
.btn3d:focus {
outline:medium none;
-moz-outline-style:none;
}
.btn3d:active {
top:9px;
}
.btn-default {
box-shadow:0 0 0 1px #ebebeb inset, 0 0 0 2px rgba(255,255,255,0.15) inset, 0 8px 0 0 #adadad, 0 8px 0 1px rgba(0,0,0,0.4), 0 8px 8px 1px rgba(0,0,0,0.5);
background-color:#fff;
}
.btn-primary {
box-shadow:0 0 0 1px #428bca inset, 0 0 0 2px rgba(255,255,255,0.15) inset, 0 8px 0 0 #357ebd, 0 8px 0 1px rgba(0,0,0,0.4), 0 8px 8px 1px rgba(0,0,0,0.5);
background-color:#428bca;
}
.btn-success {
box-shadow:0 0 0 1px #5cb85c inset, 0 0 0 2px rgba(255,255,255,0.15) inset, 0 8px 0 0 #4cae4c, 0 8px 0 1px rgba(0,0,0,0.4), 0 8px 8px 1px rgba(0,0,0,0.5);
background-color:#5cb85c;
}
.btn-info {
box-shadow:0 0 0 1px #5bc0de inset, 0 0 0 2px rgba(255,255,255,0.15) inset, 0 8px 0 0 #46b8da, 0 8px 0 1px rgba(0,0,0,0.4), 0 8px 8px 1px rgba(0,0,0,0.5);
background-color:#5bc0de;
}
.btn-warning {
box-shadow:0 0 0 1px #f0ad4e inset, 0 0 0 2px rgba(255,255,255,0.15) inset, 0 8px 0 0 #eea236, 0 8px 0 1px rgba(0,0,0,0.4), 0 8px 8px 1px rgba(0,0,0,0.5);
background-color:#f0ad4e;
}
.btn-danger {
box-shadow:0 0 0 1px #c63702 inset, 0 0 0 2px rgba(255,255,255,0.15) inset, 0 8px 0 0 #C24032, 0 8px 0 1px rgba(0,0,0,0.4), 0 8px 8px 1px rgba(0,0,0,0.5);
background-color:#c63702;
}
Markup
<h2>
CSS3 3D Button Effects</h2>
<!-- Standard button -->
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button class="btn btn-primary btn-lg btn3d" type="button"><span class="glyphicon glyphicon-cloud"></span> Primary</button>
<!-- Indicates a successful or positive action -->
<button class="btn btn-success btn-lg btn3d" type="button"><span class="glyphicon glyphicon-ok"></span> Success</button>
<!-- Contextual button for informational alert messages -->
<button class="btn btn-info btn-lg btn3d" type="button"><span class="glyphicon glyphicon-question-sign"></span> Info</button>
<!-- Indicates caution should be taken with this action -->
<button class="btn btn-warning btn-lg btn3d" type="button"><span class="glyphicon glyphicon-warning-sign"></span> Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button class="btn btn-danger btn-lg btn3d" type="button"><span class="glyphicon glyphicon-remove"></span> Danger</button>
<br />
<button class="btn btn-primary btn-lg btn3d" type="button"><span class="glyphicon glyphicon-thumbs-up"></span></button>
<button class="btn btn-danger btn-lg btn3d" type="button"><span class="glyphicon glyphicon-off"></span></button>
<br />
<button class="btn btn-primary btn-lg btn3d" type="button">Large button</button>
<br />
<button class="btn btn-primary btn3d" type="button">Default button</button>
<br />
<button class="btn btn-primary btn-sm btn3d" type="button">Small button</button>
<br />
<button class="btn btn-primary btn-xs btn3d" type="button">Extra small button</button>
</div>
#15. Progress Bar
View Effects
Click Here
CSS
.meter {
height: 20px; /* Can be anything */
position: relative;
background: #555;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
padding: 10px;
box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
}
.meter > span {
display: block;
height: 100%;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: rgb(43,194,83);
background-image: linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
box-shadow:
inset 0 2px 9px rgba(255,255,255,0.3),
inset 0 -2px 6px rgba(0,0,0,0.4);
position: relative;
overflow: hidden;
}
.orange > span {
background-color: #f1a165;
background-image: linear-gradient(to bottom, #f1a165, #f36d0a);
}
.red > span {
background-color: #f0a3a3;
background-image: linear-gradient(to bottom, #f0a3a3, #f42323);
}
.meter > span:after {
content: "";
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background-image: linear-gradient(
-45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent
);
z-index: 1;
background-size: 50px 50px;
animation: move 2s linear infinite;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
overflow: hidden;
}
.meter > span:after, .animate > span > span {
.animate > span:after {
display: none;
}
.meter > span:after, .animate > span > span {
animation: move 2s linear infinite;
}
JQuery
<script type='text/javascript'>
//<![CDATA[
$(".meter > span").each(function() {
$(this)
.data("origWidth", $(this).width())
.width(0)
.animate({
width: $(this).data("origWidth") // or + "%" if fluid
}, 1200);
});
//]]>
</script>
Markup
<div class="meter">
<span style="width: 25%;"></span>
</div>
<div class="meter orange nostripes">
<span style="width: 33.3%;"></span>
</div>
<div class="meter red">
<span style="width: 80%;"></span>
</div>
<div class="meter animate">
<span style="width: 50%;"></span>
</div>
How to Install CSS3 Animation Effects to Blogger
- Login to your blogger dashboard > Template > Edit HTML
- Click anywhere inside the template editor and press Ctrl + F
- Now search for the ]]></b:skin>
- Select your preferred effect and paste it's CSS code just before/above ]]></b:skin>
- If the effect uses JQuey, paste it right before the </body>
- Click Save template
- Now whenever you want to show the effect in your pages/posts, switch to HTML mode and paste the it's Markup (If you want to apply the effect on your blogger homepage/sidebar or anywhere, just paste the markup where you want to show.)
- Replace the http://www.knigulper.com/ with your destination URL
So these are the different types of CSS3 effects that you can implement to your blogspot template. In this post, some animations are collected from outside. If you are the owner of any transition or animation, you can request to remove it or mention your website url in comment thread and we'll link it to your website/blog.
Speak Your Mind