Buttons are centered - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Button

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

Description

Buttons are centered

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Lorem ips</title> 
  <style>
body {<!--from w  ww . j  av  a2  s.co  m-->
   width:100%;
   text-align:center;
}

.animate
 {
   transition:all 0.2s;
   -webkit-transition:all 0.2s;
}

.action-button
 {
   display:inline-block;
   margin:0 auto;
   position:relative;
   text-align:center;
}

.blue
 {
   background-color:Chartreuse;
   border-bottom:6px solid yellow;
   text-shadow:0px -3px blue;
}

.red
 {
   background-color:pink;
   border-bottom:6px solid OrangeRed;
   text-shadow:0px -3px grey;
}

.green
 {
   background-color:BlueViolet;
   border-bottom:6px solid Chartreuse;
   text-shadow:0px -3px yellow;
}

.yellow
 {
   background-color:blue;
   border-bottom:6px solid pink;
   text-shadow:0px -3px OrangeRed;
}

.action-button:active
 {
   transform:translate(0px,51px);
   -webkit-transform:translate(0px,51px);
   border-bottom:2px solid;
}
</style> 
 </head> 
 <body translate="no"> 
  <meta name="author" content="www.twitter.com/cheeriottis"> 
  <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" type="text/css"> 
  <link rel="stylesheet" href="css/core.css"> 
  <a href="#" class="action-button shadow animate blue">Lorem</a> 
  <a href="#" class="action-button shadow animate red">Lor</a> 
  <a href="#" class="action-button shadow animate green">Lor</a> 
  <a href="#" class="action-button shadow animate yellow">Lore</a>  
 </body>
</html>

Related Tutorials