Create iphone like button - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Button

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Button

Description

Create iphone like button

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 
  <style id="compiled-css" type="text/css">
.share_buttons {<!--from   ww  w  .  j a v a2  s.  c o m-->
   margin-top:10px;
   line-height:5.5;
   font-size:13px;
   width:609px;
}

.share_buttons a {
   float:left;
   color:Chartreuse;
   background:yellow;
   padding:18px 16px 7px 16px;
   -moz-border-radius:51px;
   -webkit-border-radius:51px;
   border-radius:13px;
   margin-left:5px;
   margin-bottom:91px;
   text-decoration:none;
   text-align:center;
   cursor:pointer;
}

.share_buttons a#facebook {
   background:blue;
}

.share_buttons a#plus_share {
   background:pink;
}

.share_buttons a#twitter {
   background:OrangeRed;
}

.share_buttons a#google_plus {
   background:grey;
}

.share_buttons a#tumblr {
   background:BlueViolet;
}

.share_buttons a#reddit {
   background:Chartreuse;
   color:yellow;
}

.share_buttons a#linkedin {
   background:blue;
}

.share_buttons a#pinterest {
   background:pink;
}

.share_buttons a#stumbleupon {
   background:OrangeRed;
}

.share_buttons a#envelope {
   background:grey;
}
</style> 
 </head> 
 <body> 
  <div class="share_buttons" id="share_buttons_about"> 
   <!-- Facebook --> 
   <a id="facebook" href="" target="_blank"> <i class="fa fa-facebook fa-2x">Lorem ipsum dolor sit </i> </a> 
   <!-- Twitter --> 
   <a id="twitter" href="" target="_blank"> <i class="fa fa-twitter fa-2x"></i> </a> 
   <!-- Google+ --> 
   <a id="google_plus" href="" target="_blank"> <i class="fa fa-google-plus fa-2x"></i> </a> 
   <!-- tublr --> 
   <a id="tumblr" href="" target="_blank"> <i class="fa fa-tumblr fa-2x"></i> </a> 
   <!-- LinkedIn --> 
   <a id="" target="_blank"> <i class="fa fa-linkedin fa-2x"></i> </a> 
   <!-- Pinterest --> 
   <a id="pinterest" href="javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());"> <i class="fa fa-pinterest-p fa-2x"></i> </a> 
   <!-- StumbleUpon--> 
   <a id="stumbleupon" href="" target="_blank"> <i class="fa fa-stumbleupon fa-2x"></i> </a> 
   <!-- Email --> 
   <a id="envelope" href=""> <i class="fa fa-envelope-o fa-2x"></i> </a> 
  </div> 
  <!--share_buttons-->  
 </body>
</html>

Related Tutorials