SCSS
$font: 'Source Sans Pro', sans-serif;
$primary: tomato;
$secondary: #f1481b;
$animation: 0.3s all ease;
*,
*::before,
*::after {
box-sizing: border-box;
}
a {
color: #333;
text-decoration: none;
transition: $animation;
&:hover {
color: $primary;
}
&:focus {
text-decoration: none;
}
&:active {
color: #FFF;
}
}
body {
padding: 0px 20px;
margin: 0;
font-family: $font;
background: #333;
-webkit-font-smoothing: antialiased;
}
.wrapper {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.btn {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: bold;
position: relative;
&:after {
transition: $animation;
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
border-radius: 3px;
border: 3px solid $primary;
}
&:before {
content:'';
position: absolute;
border-radius: 3px;
left: 0;
top: 0;
bottom: 0;
right: 0;
transform: rotate(45deg);
background: #fff;
z-index: -1;
}
&:hover {
&:after {
transform: rotate(45deg);
}
}
&:active {
transform: scale(1.1);
&:before {
background-color: $secondary;
}
&:after {
border-color: $secondary;
}
}
}
