SCSS
$font:'Source Sans Pro', sans-serif;
$primary: #FF0072;
$second: #644cad;
$third: #4426a8;
*,
*::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: $font;
background: #F5F0FF;
-webkit-font-smoothing: antialiased;
display: flex;
justify-content: center;
align-items: center;
}
.btn-wrapper {
min-height: 50vh;
display: flex;
align-items: center;
justify-content: center;
}
a.bttn {
color: $primary;
text-decoration: none;
-webkit-transition: 0.3s all ease;
transition: 0.3s ease all;
&:hover {
color: #FFF;
}
&: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 $primary;
border-radius: 2px;
position: relative;
box-shadow: 0px 10px 45px -7px rgba(253,104,171,1);
&: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: $primary;
z-index: -2;
}
&:hover {
&:before {
-webkit-transition: 0.5s all ease;
transition: 0.5s all ease;
left: 0;
right: 0;
opacity: 1;
}
}
&:focus {
&:before {
transition: 0.5s all ease;
left: 0;
right: 0;
opacity: 1;
}
}
}
