"css3 social icom animatiom"
Bootstrap 3.3.0 Snippet by Divscodebd

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <html> <head> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> </head> <body> <div class="container"> <div class="row"> <p>Click to activate.</p> <p> <button><i class="fa fa-facebook" aria-hidden="true"></i></button> <button class="twitter"></button> <button class="in"></button> <button class="vimeo"></button> </p> </div> </div> </body> </html>
@font-face { font-family: 'socialfont'; src: url('http://mediaashley.com/MyFont.ttf') format('truetype'); font-weight: normal; font-style: normal; } body { background: #ddd; width: 100%; margin: 70px; } button { width:100px; height:100px; display:inline-block; font-family:Arial, "Helvetica", sans-serif; font-size:16px; font-weight:bold; color:#fff; text-decoration:none; text-transform:uppercase; text-align:center; text-shadow:1px 1px 0px #07526e; padding-top:6px; margin-left:auto; margin-right:auto; left:30px; position:relative; cursor:pointer; border: none; background: #109bce; background-image: linear-gradient(bottom, rgb(14,137,182) 0%, rgb(22,179,236) 100%); border-radius: 5px; box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #07526e, 0px 10px 5px #999; } button:active { top:3px; box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #07526e, 0px 5px 3px #999; } button:before { font-family: 'socialfont'; font-size: 50px; line-height: 1em; font-weight: normal; color: #fff; content:"\F020"; width:85px; height:90px; display:block; position:absolute; padding-top:10px; top:10px; text-shadow: 1px 1px 2px #07526e; } button:active:before { top: 7px; font-size: 50px; text-shadow: 0px 3px 0px #07526e, 0px 5px 1px #07526e/*, 3px 0px 1px #07526e, 3px 3px 1px #07526e, -2px 0px 1px #68cff2*/; } .twitter:before { content:"\F021"; } .in:before { content:"\F022"; } .vimeo:before{ content:"\F024"; }

Questions / Comments: