SCSS
// Normalize/Reset only elements used
body {
margin: 0;
padding: 0;
}
// Mixin for shadow button with block sliding up
@mixin btn-split($color, $borderColor: $color, $borderWidth: 2px) {
position: relative;
padding: 0.25em 0.5em;
color: $color;
&:before,
&:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
border: $borderWidth solid $borderColor;
transition: all 0.3s ease-in;
}
&:hover {
&:before,
&:after {
transition: all 0.3s ease-out;
}
&:before {
top: -$borderWidth - 1px;
left: $borderWidth + 1px;
}
&:after {
top: $borderWidth + 1px;
left: -$borderWidth - 1px;
}
}
}
// Color variables
$color-black: #252525;
$color-grey: #f5f5f5;
// Start of styling
* {
box-sizing: border-box;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
width: 100%;
font-family: "Karla", sans-serif;
-webkit-font-smoothing: antialiased;
background-color: $color-grey;
}
a {
font-size: 2em;
text-decoration: none;
}
.btn {
@include btn-split($color-black);
}
