Styles to create round button - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Button

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

Description

Styles to create round button

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>

.btn:link, .btn:visited {
   text-transform: uppercase;
   text-decoration: none;<!--   w  w w. j av  a2s. c o m-->
   background-color: #000;
   color: #777;
   padding: 27px 40px;
   display: inline-block;
   border-radius: 100px;
   transition: all .2s;
   text-align: center;
   margin-right: 5rem;
}
.btn--small {
   max-width: 10rem;
   background-color: blue;
}
.btn--med {
   max-height: 5rem;
}


      </style> 
 </head> 
 <body translate="no"> 
  <div class="div-1"> 
   <a href="#" class="btn">Programista</a> 
  </div> 
  <div class="div-2"> 
   <a href="#" class="btn btn--med">SCSS</a> 
  </div> 
  <div class="div-3"> 
   <a href="#" class="btn btn--small">SCSS</a> 
  </div>  
 </body>
</html>

Related Tutorials