<html lang="ru">
  
<head>
  <meta name="author" content="http://masterweb.pro/">
  <link rel="stylesheet" href="css/global.css">
</head>
  
<body>
  
  <center>
    
  <h1 class="title">Buttons</h1>
    
  <div class="buttons_row">
  <input type="button" value="Blue" class="button blue animation">
  <input type="button" value="Red" class="button red animation">
  <input type="button" value="Green" class="button green animation">
  <input type="button" value="Yellow" class="button yellow animation">
  </div>
    
  </center>
  
</body>
  
</html>
/* Take web-fonts from service */
@import "http://webfonts.ru/import/corki.css";

/* Global styles for page and block */
body {
background-color: #dedede;
padding: 3%;
font-family: 'Corki';
}

input {
border: none;
outline:none;
cursor: pointer;
font-family: 'Corki';
}

.title {
margin-bottom: 50px;
padding-bottom: 15px;
font-size: 52px;
border-bottom: 1px solid #b0b0b0;
}

.buttons_row {
width: 100%;
height: auto;
}

/* Default and colorized buttons */
.button {
position: relative;
padding: 20px 40px;
margin: 10px 20px;
font-size: 39px;
text-align: center;
text-decoration: none;
background-color: #9c9c9c;
color: #fff;
border-radius: 7px;
box-shadow: 0px 7px 1px #6e6e6e;
}

.blue {
background-color: #26ADE4;
box-shadow: 0px 9px 1px #0082b5;
}

.red {
background-color: #e32730;
box-shadow: 0px 9px 1px #b50000;
}

.green {
background-color: #36b300;
box-shadow: 0px 9px 1px #0d8500;
}

.yellow {
background-color: #d6d600;
box-shadow: 0px 9px 1px #a6a600;
}

/* Animation for buttons */
.animation {
-webkit-transition: 0.2s all;
-moz-transition: 0.2s all;
-o-transition: 0.2s all;
-transition: 0.2s all;
}

.button:hover {
transform: translateY(4px);
-webkit-transform: translateY(4px);
box-shadow: 0px 5px 1px #6e6e6e;
}

.button:active {
transform: translateY(8px);
-webkit-transform: translateY(8px);
box-shadow: 0px 1px 1px #6e6e6e;
}

.blue:hover {
transform: translateY(4px);
-webkit-transform: translateY(4px);
box-shadow: 0px 5px 1px #0082b5;
}

.blue:active {
transform: translateY(8px);
-webkit-transform: translateY(8px);
box-shadow: 0px 1px 1px #0082b5;
}

.red:hover {
transform: translateY(4px);
-webkit-transform: translateY(4px);
box-shadow: 0px 5px 1px #b50000;
}

.red:active {
transform: translateY(8px);
-webkit-transform: translateY(8px);
box-shadow: 0px 1px 1px #b50000;
}

.green:hover {
transform: translateY(4px);
-webkit-transform: translateY(4px);
box-shadow: 0px 5px 1px #0d8500;
}

.green:active {
transform: translateY(8px);
-webkit-transform: translateY(8px);
box-shadow: 0px 1px 1px #0d8500;
}

.yellow:hover {
transform: translateY(4px);
-webkit-transform: translateY(4px);
box-shadow: 0px 5px 1px #a6a600;
}

.yellow:active {
transform: translateY(8px);
-webkit-transform: translateY(8px);
box-shadow: 0px 1px 1px #a6a600;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.