<div class="button button-purple">Click</div>
<div class="button button-purple">Click</div>
<div class="button button-purple">Click</div>
<div class="button button-purple">Click</div>
<div class="button button-purple">Click</div>
<div class="button button-purple">Click</div>
<div class="button button-purple">Click</div>
body {
text-align: center;
background-color: thistle;
padding-top: 30px;
letter-spacing: 1.3px;
}
//Basic button styling
.button {
color: #fff;
display: inline-block;
padding: 8px 15px;
font-size: 14px;
line-height: 22px;
text-align: center;
text-transform: uppercase;
cursor: pointer;
margin: 20px auto;
border-radius: 10px;
}
//Base Color
$violet-base: #A200FF;
//Mixin for Button Properties: Border + Background-Color
@mixin buttonColorProperties($color) {
$border: adjust-hue($color, -6deg);
background-color: $color;
border: 3px solid $border;
}
//for directive that cycles through buttons and changes the starting background-color
@for $i from 1 through 7 {
.button-purple:nth-of-type(#{$i}) {
background-color: darken($violet-base, 5*$i);
}
}
//Mixin that applies the above color properties
@mixin buttonColors($baseColor) {
@include buttonColorProperties($baseColor);
&:hover {
$base-hover: darken($baseColor, 30);
@include buttonColorProperties($base-hover);
transition: all 0.25s;
}
}
//using the mixin & passing it the violet hex
.button-purple {
@include buttonColors($violet-base);
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.