<div class="flex">
<a href="#0" class="bttn">Continue</a>
</div>
<div class="flex dark">
<a href="#0" class="bttn-dark">Continue</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;
}
html, body {
height: 100%;
width: 100%;
}
body {
padding: 0px;
margin: 0;
font-family: 'Source Sans Pro', sans-serif;
background: #f5f0ff;
-webkit-font-smoothing: antialiased;
}
.dark {
background: #24252a;
}
.flex {
min-height: 50vh;
display: flex;
align-items: center;
justify-content: center;
}
a.bttn {
color: #ff0072;
text-decoration: none;
-webkit-transition: 0.3s all ease;
transition: 0.3s ease all;
}
a.bttn:hover {
color: #fff;
}
a.bttn:focus {
color: #fff;
}
a.bttn-dark {
color: #644cad;
text-decoration: none;
-webkit-transition: 0.3s all ease;
transition: 0.3s ease all;
}
a.bttn-dark:hover {
color: #fff;
}
a.bttn-dark:focus {
color: #fff;
}
.bttn {
font-size: 18px;
letter-spacing: 2px;
text-transform: uppercase;
display: inline-block;
text-align: center;
width: 270px;
font-weight: bold;
padding: 14px 0px;
border: 3px solid #ff0072;
border-radius: 2px;
position: relative;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.1);
}
.bttn:before {
-webkit-transition: 0.5s all ease;
transition: 0.5s all ease;
position: absolute;
top: 0;
left: 50%;
right: 50%;
bottom: 0;
opacity: 0;
content: '';
background-color: #ff0072;
z-index: -2;
}
.bttn:hover:before {
-webkit-transition: 0.5s all ease;
transition: 0.5s all ease;
left: 0;
right: 0;
opacity: 1;
}
.bttn:focus:before {
transition: 0.5s all ease;
left: 0;
right: 0;
opacity: 1;
}
.bttn-dark {
font-size: 18px;
letter-spacing: 2px;
text-transform: uppercase;
display: inline-block;
text-align: center;
width: 270px;
font-weight: bold;
padding: 14px 0px;
border: 3px solid #644cad;
border-radius: 2px;
position: relative;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.1);
z-index: 2;
}
.bttn-dark:before {
-webkit-transition: 0.5s all ease;
transition: 0.5s all ease;
position: absolute;
top: 0;
left: 50%;
right: 50%;
bottom: 0;
opacity: 0;
content: '';
background-color: #644cad;
z-index: -1;
}
.bttn-dark:hover:before {
-webkit-transition: 0.5s all ease;
transition: 0.5s all ease;
left: 0;
right: 0;
opacity: 1;
}
.bttn-dark:focus:before {
-webkit-transition: 0.5s all ease;
transition: 0.5s all ease;
left: 0;
right: 0;
opacity: 1;
}