Dr-Wordpress: CSS3 and HTML5 Social media icons

Just Follow these steps and make your Own buttons Using CSS3
------------------------------HTML---------------------------------
<html>
<head>
<meta charset="UTF-8" />
<title>CSS3 and HTML5 Social media icons</title>
</head>
<body>
<div class="wrapper">
<a class="icon facebook" href="#"></a>
<a class="icon twitter" href="#"></a>
<a class="icon linkedin" href="#"></a>
<a class="icon youtube" href="#"></a>
<a class="icon flickr" href="#"></a>
<a class="icon email" href="#"></a>
</div>
</body>
</html>

----------------------------------CSS-------------------------------
import url(http://weloveiconfonts.com/api/?family=zocial);

/* zocial */
[class*="zocial-"]:before { font-family: 'zocial', sans-serif;}

body{ background: url("http://subtlepatterns.com/patterns/cloth_alike.png") repeat scroll 0% 0% transparent;}
.wrapper{ width: 325px; height: 50px; position: absolute; top: 50%; left: 50%; margin-left: -162px; margin-top: -25px;}

.icon{ display: inline-block; position: relative; color: #bdbdbd; width: 50px; height: 50px; text-align: center; font-size: 1.47em; line-height: 2em; background-color: #fff; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; box-shadow: 0px 3px 0px #bdbdbd, 0px 3px 10px #bababa; -webkit-transition:background-color 250ms ease 0s; transition:background-color 250ms ease 0s;}

.zocial-facebook{margin-left: -8px}
.icon.facebook:hover{background-color: #4986c7;}
.twitter:hover{background-color: #4cb6e8;}
.linkedin:hover{background-color: #29a0cc;}
.youtube:hover{background-color: #a32929;}
.flickr:hover{background-color: #c257ad;}
.email:hover{background-color: #d5b120;}

a{ text-decoration: none;}
.icon:hover{ color: #fff; box-shadow: 0px 3px 0px #686868, 0px 3px 10px #7e7e7e;}
.icon:active{ box-shadow: inset 0px 1px 4px #3d3d3d, 0px 0px 0px #bdbdbd; top: 3px;}

Dr-Wordpress

wordpress_add

Saturday 29 March 2014

CSS3 and HTML5 Social media icons

Subscribe Dr-Wordpress for Important Knowledge of wordpress..your's suggestions are most welcomed.

No comments:

Post a Comment