<a href="#" class="iastate22-button iastate22-button--reverse">Primary CTA Style<span class="arrow"></span></a>
<a href="{{url}}" class="iastate22-button iastate22-button--reverse">{{text}}<span class="arrow"></span></a>
{
"text": "Primary CTA Style",
"url": "#"
}
%iastate22-button,
.iastate22-button {
display: block;
border: rem(2) solid $iastate-maroon;
border-radius: rem(30);
padding: rem(8) rem(35) rem(8) rem(20);
appearance: none;
margin: rem(10) 0;
text-align: left;
cursor: pointer;
background-color: transparent;
color: $iastate-maroon;
font-family: $typeface-sans-serif;
font-weight: 700;
font-size: rem(18);
line-height: (25 / 18);
text-decoration: none;
transition: 0.2s color ease-in-out, 0.2s background-color ease-in-out, 0.2s padding ease-in-out;
position: relative;
@include media-breakpoint-up(md) {
display: inline-block;
}
.arrow {
right: rem(17);
top: rem(20);
width: 0;
background-color: $iastate-gold;
&:after,
&:before {
background-color: $iastate-gold;
}
}
&:hover {
background-color: $iastate-maroon;
color: $white;
padding-right: rem(40);
.arrow {
width: rem(12);
}
}
}
%iastate22-button--reverse,
.iastate22-button--reverse {
border-color: $white;
background-color: $white;
.arrow {
background-color: $iastate-maroon;
&:after,
&:before {
background-color: $iastate-maroon;
}
}
&:hover {
background-color: $white;
color: $iastate-maroon;
}
}
This is a custom component (the class has been prefaced with .iastate22-[classname]
).
--reverse
variant with no border (and white background on hover)<span class="arrow"></span>
is required after the button textindex.scss
file as @import "../components/button/button";
button-set
, which allows for multiple instances of the button to be output