<button class="cp_button12">button</button>
.cp_button12 {
width: 160px;
margin: 0.4em;
padding: 1em;
line-height: 1.4;
cursor: pointer;
user-select: none;
-webkit-transform: translateZ(0);
transform: translateZ(0);
color: #ffffff;
border: 1px solid #29b6f6;
background: #29b6f6;
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.cp_button12:before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: '';
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: top right bottom left;
transition-property: top right bottom left;
border: rgba(41,182,246,0.5) solid 4px;
}
.cp_button12:hover:before {
top: -8px;
right: -8px;
bottom: -8px;
left: -8px;
opacity: 1;
}
.cp_button12:active {
color: #ffffff;
background-color: #0288d1;
}
.cp_button12:active:before {
top: -3px;
right: -3px;
bottom: -3px;
left: -3px;
}
.cp_button12:focus:hover,
.cp_button12:focus,
.cp_button12:active:hover,
.cp_button12:hover {
color: #ffffff;
border: 1px solid #29b6f6;
}