Component Library

Button: Reverse Video 

<button class="iastate22-button iastate22-button--reverse" data-micromodal-trigger=Video-Modal-Rev>
  Reverse 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-Rev" 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-Rev-content" role="dialog" aria-modal="true" aria-labelledby="Video-Modal-Rev-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-Rev-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--reverse" 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": "Reverse Video Button",
  "url": "#",
  "video": {
    "text": "Link Lorem Ipsum Dolor",
    "modal": {
      "id": "Video-Modal-Rev",
      "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": ""
      }
    }
  }
}
  • Content: 
    %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;
  }
}
  • URL: /components/raw/button/_button.scss
  • Filesystem Path: src/components/button/_button.scss
  • Size: 2.9 KB

Button

This is a custom component (the class has been prefaced with .iastate22-[classname]).

  • There are two styles for the buttons, the default style with maroon border, white background (and maroon background on hover) and the --reverse variant with no border (and white background on hover)
  • For the arrow on the right side, the markup <span class="arrow"></span> is required after the button text
  • The custom styles are imported into the index.scss file as @import "../components/button/button";
  • Typically the button would be placed onto a page using the companion component button-set, which allows for multiple instances of the button to be output