<button class="button dark-grey" type="button">
DJ Horn
</button>
<button class="button {{ color }}" type="button">
{{ text }}
</button>
{
"text": "DJ Horn",
"color": "dark-grey"
}
.button {
font-size: 1rem;
cursor: pointer;
line-height: 1.4;
padding: $space-one-half $space;
display: inline-block;
text-decoration: none;
text-align: center;
-webkit-transition: all .4s ease;
transition: all .4s ease;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
&:hover,
&:focus {
text-decoration: none;
background-color: $white;
-webkit-box-shadow: 5px 5px 10px 0 $drop_shadow;
box-shadow: 5px 5px 10px 0 $drop_shadow;
}
&.dark-grey {
background-color: $grey_dark;
border: 1px solid $grey_dark;
color: $white;
&:hover,
&:focus {
color: $grey_dark;
background-color: $white;
}
}
&.gold {
background-color: $gold;
border: 1px solid $gold;
color: $black;
&:hover,
&:focus {
color: $grey_dark;
background-color: $white;
}
}
&.grey-light {
background-color: $grey_light;
border: 1px solid $grey_light;
color: $black;
&:hover,
&:focus {
color: $grey_dark;
background-color: $white;
}
}
&.white {
background-color: $white;
border: 1px solid $white;
color: $black;
&:hover,
&:focus {
color: $white;
background-color: $grey_dark;
}
}
}
No notes defined.