Curved button with circle - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Button

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

Description

Curved button with circle

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

body {<!--  w w w. ja  v  a2 s .  c o  m-->
   font-family:"Arial";
}
.wrap {
   background-color:#ececec;
   border-radius:8px;
   max-width:320px;
   margin:0px auto;
   padding:10px 0px;
   border-bottom:3px solid #e1e1e1;
   position:relative;
}
.wrap ul {
   padding:0px;
   margin:0px;
   text-align:center;
}
.wrap ul li {
   display:inline-block;
   list-style:none;
   background-color:#696e6e;
   padding:10px 15px;
   color:#FFF;
   border-radius:8px;
   padding:10px 15px 10px 80px;
}
.wrap ul li:first-child {
   padding:10px 80px 10px 15px;
}
.circle-back {
   width:180px;
   height:180px;
   border-radius:90px;
   position:absolute;
   top:0px;
   left:50%;
   margin-left:-90px;
   background-color:#ececec;
}
.circle-wrap {
   position:absolute;
   top:0px;
   left:0px;
   width:100%;
   height:60px;
   overflow:hidden;
}
.circle-border {
   width:145px;
   height:145px;
   border-radius:80px;
   background-color:#FFF;
   position:absolute;
   top:10px;
   left:50%;
   margin-left:-78px;
   box-shadow:0px 0px 10px #c1c1c1;
   overflow:hidden;
   padding:5px;
}
.line {
   background-color:#e1e1e1;
   height:3px;
   width:100%;
   position:absolute;
   top:60px;
   left:0px;
}
.logo {
   background-color:#e1e1e1;
   display:inline-block;
   width:100%;
   height:100%;
   border-radius:80px;
}
.logo h1 {
   padding:0px;
   margin:0px;
   text-transform:uppercase;
   color:#696e6e;
   line-height:140px;
   text-align:center;
   font-size:20px;
   font-weight:normal;
}


      </style> 
 </head> 
 <body> 
  <div class="wrap"> 
   <ul> 
    <li>About</li> 
    <li>Work</li> 
   </ul> 
   <div class="circle-wrap"> 
    <div class="circle-back"> 
     <div class="line"></div> 
    </div> 
   </div> 
   <div class="circle-border"> 
    <div class="logo"> 
     <h1>LOGO</h1> 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials