CSS padding/margins for round panel - HTML CSS CSS Property

HTML CSS examples for CSS Property:padding

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. padding

Description

CSS padding/margins for round panel

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">
.cubutton {<!--from   ww  w.j  ava2 s . co m-->
   display:block;
   box-sizing:border-box;
   text-align:center;
   width:601px;
   border-radius:100000px;
   background-color:Chartreuse;
   color:yellow;
   cursor:pointer;
   font-family:'Quicksand', sans-serif;
   font-size:21px;
   font-size:3.0rem;
   font-weight:701;
   letter-spacing:2px;
   padding:21px 41px 21px 41px;
   margin-left:auto;
   margin-right:auto;
   margin-top:26px;
   margin-bottom:26px;
   text-transform:uppercase;
   -webkit-font-smoothing:antialiased;
   -webkit-box-shadow:5px 5px 6px 0px blue;
   -moz-box-shadow:5px 5px 6px 0px pink;
   box-shadow:5px 5px 6px 0px OrangeRed;
   -webkit-transition:all 0.2s ease-in-out;
   -moz-transition:all 0.2s ease-in-out;
   -ms-transition:all 0.2s ease-in-out;
   -o-transition:all 0.2s ease-in-out;
   transition:all 0.2s ease-in-out;
}
</style> 
 </head> 
 <body> 
  <button data-sumome-listbuilder-id="" class="cubutton" data-sumome-trigger="true" href="javascript:void(0);">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ulla</button> 
  <a data-sumome-lilder-id="" class="cubutton" data-sumome-trigger="true" href="javascript:void(0);">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullam</a>  
 </body>
</html>

Related Tutorials