$blue: #259BB6;
$green: #9BBF40;
$purple: #915B9F;
@mixin light-button($accent) {
border: 2px solid $accent;
color: $accent;
&:before {
opacity: 0;
background-color: $accent;
}
&:hover { color: white; }
}
@mixin dark-button($accent) {
border: 2px solid $accent;
color: white;
&:before { background-color: $accent; }
&:hover { color: $accent; }
}
html,body {
width: 100%;
height: 100%;
overflow: hidden;
#container {
width: 700px;
margin: 5% auto;
text-align: center;
}
button, .button {
width: 33.3%;
height: 48px;
position: relative;
margin: 18px;
overflow: hidden;
background: transparent;
font-size: 18px;
cursor: pointer;
&:before {
content: "";
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
z-index: -1;
}
&:focus { outline: none; }
&#btn-1 {
@include light-button($blue);
transition: color 0s linear 0.3s;
&:before {
width: 0;
height: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 1;
border-radius: 100%;
transition: all 0.3s linear;
}
&:hover {
transition-delay: 0s;
&:before {
width: 250px;
height: 250px;
}
}
}
&#btn-2 {
@include dark-button($blue);
transition: color 0s linear 0s;
&:before {
width: 250px;
height: 250px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 100%;
transition: all 0.3s linear;
}
&:hover {
transition-delay: 0.3s;
&:before {
width: 0;
height: 0;
}
}
}
&#btn-3 {
@include light-button($green);
transition: color 0.4s linear;
&:before { transition: opacity 0.3s linear 0.1s; }
&:hover:before { opacity: 1; }
}
&#btn-4 {
@include dark-button($green);
transition: color 0.3s linear 0,1s;
&:before { transition: opacity 0.4s linear; }
&:hover:before { opacity: 0; }
}
&#btn-5 {
@include light-button($purple);
transition: color 100ms linear;
&:before {
height: 0;
opacity: 1;
transition: height 200ms linear;
}
&:hover:before { height: 100%; }
}
&#btn-6 {
@include dark-button($purple);
transition: color 100ms linear;
&:before { transition: height 200ms linear; }
&:hover:before { height: 0; }
}
}
}
