Style button to 3D effect - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Button

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

Description

Style button to 3D effect

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Lorem ipsum d</title> 
  <style>
body {<!-- ww w.j  a v a 2  s. c  o m-->
   background-color:Chartreuse;
}

* {
   color:yellow;
   font-weight:301;
   font-family:'Lato', sans-serif;
}

h1 {
   font-size:41px;
   text-align:center;
   margin-bottom:51px;
}

.btn {
   -webkit-tap-highlight-color:transparent;
   user-select:none;
   -webkit-backface-visibility:hidden;
   backface-visibility:hidden;
   -webkit-appearance:none;
   -moz-appearance:none;
   appearance:none;
   display:block;
   position:relative;
   margin:0 auto;
   outline:none;
   border:none;
   background-color:blue;
   padding:26px 66px;
   font-size:26px;
   text-transform:uppercase;
   border-radius:26px;
   box-shadow:0 9px pink;
   cursor:pointer;
   top:0;
   transition:all .6s;
}

.btn:hover {
   top:4px;
   box-shadow:0 6px OrangeRed;
}

.btn:active {
   top:9px;
   box-shadow:none;
}
</style> 
 </head> 
 <body translate="no"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
  <link href="https://fonts.googleapis.com/css?family=Lato:100,300,400" rel="stylesheet"> 
  <title>Lorem ips</title> 
  <h1>Lorem ipsum dolor sit ame</h1> 
  <button class="btn">Lorem ips</button>  
 </body>
</html>

Related Tutorials