<button class="iastate22-button iastate22-button--clear" data-micromodal-trigger=Video-Modal-Clear>
Clear Video Button
<span class="icon-video">
<svg xmlns="http://www.w3.org/2000/svg" width="31" height="18.002" viewBox="0 0 31 18.002" class="icon-video--inactive">
<path d="M31,3.984a2.153,2.153,0,0,0-2.891-1.846L23,3.75V2.979A3.03,3.03,0,0,0,19.916,0H3.1A3.052,3.052,0,0,0,0,3v12.02A3.047,3.047,0,0,0,3.026,18H19.9A3.055,3.055,0,0,0,23,15.007v-.746l5.045,1.59a2.2,2.2,0,0,0,.8.153h.014a1.992,1.992,0,0,0,1.063-.264A2.027,2.027,0,0,0,31,13.979Zm-10,11A1.079,1.079,0,0,1,19.916,16H3.063A1.08,1.08,0,0,1,2,15V3.024A1.049,1.049,0,0,1,3.061,2H19.933A1.062,1.062,0,0,1,21,3V14.981Zm7.98-1.005a.215.215,0,0,1-.108.028h0l-.155-.038L23,12.164V5.847l5.78-1.826a.229.229,0,0,1,.081-.016h.047A.119.119,0,0,1,29,4.037Z" transform="translate(0 0)" fill="#7c2529"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="30.873" height="18" viewBox="0 0 30.873 18" class="icon-video--active">
<path id="SVG_Video_Gold_Fill" d="M-980.032,12916a2.129,2.129,0,0,1-1.968-2.249v-13.5a2.129,2.129,0,0,1,1.968-2.25h16.93a2.131,2.131,0,0,1,1.974,2.25v13.507A2.13,2.13,0,0,1-963.1,12916Zm27.316-2.1-6.412-2.162v-9.481l6.412-2.159a1.093,1.093,0,0,1,.451-.1,1.167,1.167,0,0,1,1.138,1.2v11.6a1.218,1.218,0,0,1-.541,1.021,1.1,1.1,0,0,1-.593.175A1.115,1.115,0,0,1-952.716,12913.9Z" transform="translate(982 -12898)" fill="#f1be48"/>
</svg>
</span>
</button>
<div class="iastate22-modal iastate22-modal--with-video" id="Video-Modal-Clear" aria-hidden="false">
<div class="iastate22-modal__overlay" tabindex="-1" data-micromodal-close>
<div class="iastate22-modal__container iastate22-modal__container-with-media" id="Video-Modal-Clear-content" role="dialog" aria-modal="true" aria-labelledby="Video-Modal-Clear-title">
<button class="iastate22-modal__close" aria-label="Close modal" data-micromodal-close><i class="fa-light fa-xmark" aria-hidden="true"></i></button>
<div class="iastate22-modal__media">
<div class="video-embed">
<div class="video-embed__media-wrap">
<img src="../../img/IMG-Inline_Center_FPO.jpg" alt="" />
<div class="video-embed__video" aria-label="YouTube Video: Your future starts now." data-vid="LjOmcZkXVcU"></div>
</div>
<div class="video-embed__caption">Video caption lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</div>
</div>
</div>
<div class="iastate22-modal__content">
<h2 class="iastate22-modal__title" id="Video-Modal-Clear-title">Video Modal</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
</div>
</div>
</div>
</div>
<button class="iastate22-button iastate22-button--clear" data-micromodal-trigger={{ video.modal.id }}>
{{text}}
<span class="icon-video">
<svg xmlns="http://www.w3.org/2000/svg" width="31" height="18.002" viewBox="0 0 31 18.002" class="icon-video--inactive">
<path d="M31,3.984a2.153,2.153,0,0,0-2.891-1.846L23,3.75V2.979A3.03,3.03,0,0,0,19.916,0H3.1A3.052,3.052,0,0,0,0,3v12.02A3.047,3.047,0,0,0,3.026,18H19.9A3.055,3.055,0,0,0,23,15.007v-.746l5.045,1.59a2.2,2.2,0,0,0,.8.153h.014a1.992,1.992,0,0,0,1.063-.264A2.027,2.027,0,0,0,31,13.979Zm-10,11A1.079,1.079,0,0,1,19.916,16H3.063A1.08,1.08,0,0,1,2,15V3.024A1.049,1.049,0,0,1,3.061,2H19.933A1.062,1.062,0,0,1,21,3V14.981Zm7.98-1.005a.215.215,0,0,1-.108.028h0l-.155-.038L23,12.164V5.847l5.78-1.826a.229.229,0,0,1,.081-.016h.047A.119.119,0,0,1,29,4.037Z" transform="translate(0 0)" fill="#7c2529"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="30.873" height="18" viewBox="0 0 30.873 18" class="icon-video--active">
<path id="SVG_Video_Gold_Fill" d="M-980.032,12916a2.129,2.129,0,0,1-1.968-2.249v-13.5a2.129,2.129,0,0,1,1.968-2.25h16.93a2.131,2.131,0,0,1,1.974,2.25v13.507A2.13,2.13,0,0,1-963.1,12916Zm27.316-2.1-6.412-2.162v-9.481l6.412-2.159a1.093,1.093,0,0,1,.451-.1,1.167,1.167,0,0,1,1.138,1.2v11.6a1.218,1.218,0,0,1-.541,1.021,1.1,1.1,0,0,1-.593.175A1.115,1.115,0,0,1-952.716,12913.9Z" transform="translate(982 -12898)" fill="#f1be48"/>
</svg>
</span>
</button>
{% include "@modal--with-video" with video.modal %}
{
"text": "Clear Video Button",
"url": "#",
"video": {
"text": "Link Lorem Ipsum Dolor",
"modal": {
"id": "Video-Modal-Clear",
"title": "Video Modal",
"content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>",
"video": {
"wallpaper": "../../img/IMG-Inline_Center_FPO.jpg",
"source": "youtube",
"title": "Your future starts now.",
"youtube_video_id": "LjOmcZkXVcU",
"vimeo_video_id": ""
}
}
}
}
%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;
}
&:has(.icon-video) {
padding-right: rem(20);
display: inline-flex;
}
&:has(.icon) {
display: inline-flex;
padding-right: rem(40);
}
.arrow {
right: rem(17);
top: rem(20);
width: 0;
background-color: $iastate-gold;
&:after,
&:before {
background-color: $iastate-gold;
}
}
.icon {
position: absolute;
padding-left: rem(10);
right: rem(16);
bottom: rem(8);
}
.icon-video {
padding-left: rem(40);
position: relative;
svg,
svg path {
fill: $iastate-maroon;
}
svg {
position: absolute;
left: rem(10);
top: rem(4);
transition: opacity 0.3s ease-out;
&.icon-video--inactive {
opacity: 1;
}
&.icon-video--active {
opacity: 0;
path {
fill: $white;
}
}
}
}
&:hover,
&:focus-visible {
background-color: $iastate-maroon;
color: $white;
padding-right: rem(40);
.arrow {
width: rem(12);
}
svg.icon-video--inactive {
opacity: 0;
}
svg.icon-video--active {
opacity: 1;
}
}
&:has(.icon-video) {
&:hover,
&:focus-visible {
padding-right: rem(20);
}
}
}
%iastate22-button--reverse,
.iastate22-button--reverse {
border-color: $white;
background-color: $white;
.arrow {
background-color: $iastate-maroon;
&:after,
&:before {
background-color: $iastate-maroon;
}
}
.icon-video {
svg.icon-video--active {
path {
fill: $iastate-maroon;
}
}
}
&:hover,
&:focus-visible {
background-color: $white;
color: $iastate-maroon;
}
}
%iastate22-button--clear,
.iastate22-button--clear {
border: none;
background: transparent;
.icon-video {
svg.icon-video--active {
path {
fill: $iastate-maroon;
}
}
}
&:hover,
&:focus-visible {
border: none;
background: transparent;
color: $iastate-maroon;
}
}
%iastate22-button--clear-reverse,
.iastate22-button--clear-reverse {
border: none;
background: transparent;
color: $white;
.icon-video {
svg {
path {
fill: $white;
}
}
}
&:hover,
&:focus-visible {
border: none;
background: transparent;
}
}
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