Add A Css Animated Percentage Push Clitoris On Blogger

I saw this on Paulund, a highly recommended site alongside a skillful collection of snippets, i.e. a collection of dissimilar codes that educate pocket-size utilities, all of these beingness applicable to spider web design.

In this tutorial, nosotros volition encounter how nosotros tin add together a like percentage push clitoris on Blogger alongside a actually cool hover resultant too iv social media icons alongside links to percentage the electrical flow page on Facebook, Twitter, Google+ too Pinterest. However, nosotros tin supercede these social networks later on alongside whatever other simply yesteryear changing the links below.

Demo:

• Share t

• 

  

• his page

• 

  

Creating Influenza A virus subtype H5N1 CSS Animated Share Button

Step 1. From your Blogger dashboard > become to "Template" > click on the "Edit HTML" button.

Step 2. Click anywhere within the code surface area too press the Ctrl + F keys to opened upwards the blogger search box. Type or glue the ]]> tag too hitting Enter to detect it.

Step 3. Just inwards a higher identify ]]> add together this CSS:

.share_button {
width: 300px;
height: 50px;
margin: 10px auto;
}
.share_button ul {
width: 50%;
height: inherit;
float: left;
list-style: none;
margin: 0 !important;
padding: 0 !important;
}
.share_button ul h1 {
margin-top: 9%;
overflow: hidden;
width: 100%;
color: #4889F0;
font-size: 18px;
text-shadow:2px 2px 2px #fff;
}
.share_button ul li {
position: absolute;
height: inherit;
width: 150px;
margin: 0 !important;
padding: 0 !important;
background: #EEEEEE;
-webkit-transition: all 600ms;
-moz-transition: all 600ms;
-o-transition: all 600ms;
-ms-transition: all 600ms;
transition: all 600ms;
text-align: center;
}
.share_button ul li h2 {
display: inline-block;
width: 32%;
height: 40px;
overflow: hidden;
margin-top: 5%;
cursor: pointer;
border: 0 !important;
}
.share_button ul:first-child li:first-child{
text-align: right;
}
.share_button ul:last-child li:first-child{
text-align: left;
}
.share_button ul:first-child li:last-child,
.share_button:hover ul:first-child li:first-child {
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
transform: rotateY(90deg);
}
.share_button ul:last-child li:last-child,
.share_button:hover ul:last-child li:first-child {
-webkit-transform: rotateY(-90deg);
-moz-transform: rotateY(-90deg);
-o-transform: rotateY(-90deg);
-ms-transform: rotateY(-90deg);
transform: rotateY(-90deg);
}
.share_button:hover ul:first-child li:last-child,
.share_button:hover ul:last-child li:last-child {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
}

Step 5. Now let's become ahead too insert the HTML push clitoris inwards the template. The about mutual identify would live simply after