<div class="flex">
<a href="#0" class="bttn">More</a>
</div>
@import 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:700';
*, *::before, *::after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
a {
color: #333;
text-decoration: none;
transition: 0.3s all ease;
}
a:hover {
color: #b15947;
}
a:focus {
text-decoration: none;
}
a:active {
color: #fff;
}
body {
padding: 0px 20px;
margin: 0;
font-family: 'Source Sans Pro', sans-serif;
background: #f4f5ee;
-webkit-font-smoothing: antialiased;
}
.flex {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.bttn {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: bold;
position: relative;
}
.bttn:after {
transition: 0.3s all ease;
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
border-radius: 3px;
border: 3px solid #b15947;
}
.bttn:before {
content: '';
position: absolute;
border-radius: 3px;
left: 0;
top: 0;
bottom: 0;
right: 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
background: #fff;
z-index: -1;
}
.bttn:hover:after {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.bttn:active {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.bttn:active:before {
background-color: #f1481b;
}
.bttn:active:after {
border-color: #f1481b;
}