Search code examples
javascriptcssscreen-readers

Screen reader only text is displayed in buttons that contain links with target="_blank"

/** Add new-window and download classes automatically to links **/
$('a[target=_blank]').addClass('new-window');
$("a").filter(function () {
   return $(this).attr("href").match(/\.(pdf|doc|docx|ppt|pptx|xls|xlxs|epub|odt|odp|ods|txt|rtf)$/i);
}).addClass('download');

/** Links JavaScript **/
/* Check for links in document */
var links = document.querySelectorAll("a");
/* Create index for download links unique id*/
var downloadIndex = 0;
/* Create index for new window links unique id*/
var newWindowIndex = 0;
/* Check links on page */
for (var linkIndex = 0; linkIndex < links.length; linkIndex++) {
   /* Creating a span to wrap the screen-reader text */
   var srTxtWrapper = document.createElement("span");
   /* Add class .sr-only to screen-reader span */
   srTxtWrapper.classList.add("sr-only");

   if (links[linkIndex].classList.contains("download")) {
      /* Add download attribute */
      links[linkIndex].setAttribute("download", "");
      /* Add unique id to download link */
      links[linkIndex].setAttribute("id", "download-file-" + downloadIndex);
      /* Add title attribute saying download file */
      links[linkIndex].setAttribute("title", "download bestand");
      /* Add data-toggle tooltip data attribute */
      links[linkIndex].setAttribute("data-toggle", "tooltip");
      /* Creating the screen-reader text */
      var srTxt = document.createTextNode("(deze link downloadt een bestand)");
      /* Adding the screen-reader text to the span*/
      srTxtWrapper.appendChild(srTxt);
      links[linkIndex].appendChild(srTxtWrapper);
      /* Increase downloadIndex by one for next download link */
      downloadIndex++;
   }
   else if (links[linkIndex].classList.contains("new-window")) {
      /* Add target _blank attribute for link to open in new window */
      links[linkIndex].setAttribute("target", "_blank");
      /* Add unique id to new window link */
      links[linkIndex].setAttribute("id", "new-window" + newWindowIndex);
      /* Add title attribute saying link opens in new window */
      links[linkIndex].setAttribute("title", "open in nieuw venster/tab");
      /* Add data-toggle tooltip data attribute */
      links[linkIndex].setAttribute("data-toggle", "tooltip");
      /* Creating the screen-reader text */
      var srTxt = document.createTextNode("(deze link opent in een nieuw venster/tab)");
      /* Adding the screen-reader text to the span*/
      srTxtWrapper.appendChild(srTxt);
      links[linkIndex].appendChild(srTxtWrapper);
      /* Increase newWindowIndex by one for next newWindow link */
      newWindowIndex++;
   }
}
.body--theme1 {
  --brand-color: #ffcb05;
  --brand-color-darker: #f5a61a;
  --brand-color-lighter: #fff578;
  --brand-color-lighter-rgba: 255, 245, 120;
  --color-marker: 255, 255, 153;
}

.body--theme2 {
  --brand-color: #f16682;
  --brand-color-darker: #ee3135;
  --brand-color-lighter: #f287b7;
  --brand-color-lighter-rgba: 242, 135, 183;
  --color-marker: 255, 102, 153;
}

.body--theme3 {
  --brand-color: #b1d249;
  --brand-color-darker: #45b97c;
  --brand-color-lighter: #d5e05b;
  --brand-color-lighter-rgba: 213, 224, 91;
  --color-marker: 153, 255, 51;
}

.body--theme4 {
  --brand-color: #1ebcc5;
  --brand-color-darker: #4594d3;
  --brand-color-lighter: #84d0d9;
  --brand-color-lighter-rgba: 132, 208, 217;
  --color-marker: 51, 153, 255;
}

.button {
  position: relative;
  z-index: 10;
  color: #808184;
  background-color: #f6f6f6;
  font-family: Roboto, sans-serif;
  font-weight: 700;
  line-height: 1.125;
  text-align: center;
  font-size: 1.125rem;
  display: inline-block;
  padding: .75rem 1.25rem;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: all .2s ease-in-out
}

.button:before {
  z-index: 40;
  background-color: #000
}

.button:after,
.button:before {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: block;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);
  opacity: 0;
  content: "";
  transition: opacity .2s ease-in-out
}

.button:after {
  z-index: 0
}

.button:hover:before {
  opacity: .05
}

.button:hover:after {
  opacity: .5
}

.button span {
  margin-left: .25rem;
  margin-right: .25rem;
  position: relative;
  z-index: 50
}

.button .icon {
  width: 1rem;
  height: 1rem;
  display: inline-block
}

.button .icon:after {
  display: none
}

.button--small,
.inputfile+label,
.rte--small a.button {
  padding: .75rem;
  font-size: .875rem;
  font-weight: 400
}

.button--small .icon,
.inputfile+label .icon,
.rte--small a.button .icon {
  width: .75rem;
  height: .75rem
}

.button--small .icon--external-link,
.inputfile+label .icon--external-link,
.rte--small a.button .icon--external-link {
  width: 1rem;
  height: 1rem
}

.button--small.button--circle,
.inputfile+label.button--circle,
.rte--small a.button--circle.button {
  height: 2rem;
  width: 2rem
}

.button--small.button--circle .icon,
.inputfile+label.button--circle .icon,
.rte--small a.button--circle.button .icon {
  height: 1rem;
  width: 1rem
}

.button--large {
  padding: .75rem 2.5rem;
  font-size: 1.75rem
}

.button--large span {
  margin-left: .5rem;
  margin-right: .5rem
}

.button--large .icon {
  width: 1.5rem;
  height: 1.5rem
}

.button--large.button--circle {
  height: 3rem;
  width: 3rem
}

@media (min-width:640px) {
  .button--large.button--circle {
      height: 4rem;
      width: 4rem
  }

  .button--large.button--circle .icon {
      width: 2rem;
      height: 2rem
  }
}

.button--xlarge {
  padding: 1rem 2.5rem;
  font-size: 1.75rem
}

.button--xlarge span {
  margin-left: .5rem;
  margin-right: .5rem
}

.button--xlarge .icon {
  width: 1.5rem;
  height: 1.5rem
}

.button--xlarge.button--circle {
  height: 4rem;
  width: 4rem;
  font-size: 1.875rem
}

.button--xlarge.button--circle .icon {
  width: 2.5rem;
  height: 2.5rem
}

@media (min-width:768px) {
  .button--xlarge.button--circle {
      height: 5rem;
      width: 5rem
  }
}

@media (min-width:768px) {
  .button--xlarge {
      font-size: 1.875rem
  }
}

.body--theme1 .button--color,
.button--name {
  background-color: #f5a61a;
  color: #fff
}

.body--theme1 .button--color:hover:before,
.button--name:hover:before {
  opacity: .1
}

.body--theme1 .button--color:hover:after,
.button--name:hover:after {
  opacity: .5
}

.body--theme1 .button--color-remove-hover:hover:after,
.body--theme1 .button--color-remove-hover:hover:before,
.button--name-remove-hover:hover:after,
.button--name-remove-hover:hover:before {
  opacity: 0
}

.body--theme2 .button--color,
.button--name {
  background-color: #ee3135;
  color: #fff
}

.body--theme2 .button--color:hover:before,
.button--name:hover:before {
  opacity: .1
}

.body--theme2 .button--color:hover:after,
.button--name:hover:after {
  opacity: .5
}

.body--theme2 .button--color-remove-hover:hover:after,
.body--theme2 .button--color-remove-hover:hover:before,
.button--name-remove-hover:hover:after,
.button--name-remove-hover:hover:before {
  opacity: 0
}

.body--theme3 .button--color,
.button--name {
  background-color: #45b97c;
  color: #fff
}

.body--theme3 .button--color:hover:before,
.button--name:hover:before {
  opacity: .1
}

.body--theme3 .button--color:hover:after,
.button--name:hover:after {
  opacity: .5
}

.body--theme3 .button--color-remove-hover:hover:after,
.body--theme3 .button--color-remove-hover:hover:before,
.button--name-remove-hover:hover:after,
.button--name-remove-hover:hover:before {
  opacity: 0
}

.body--theme4 .button--color,
.button--name {
  background-color: #4594d3;
  color: #fff
}

.body--theme4 .button--color:hover:before,
.button--name:hover:before {
  opacity: .1
}

.body--theme4 .button--color:hover:after,
.button--name:hover:after {
  opacity: .5
}

.body--theme4 .button--color-remove-hover:hover:after,
.body--theme4 .button--color-remove-hover:hover:before,
.button--name-remove-hover:hover:after,
.button--name-remove-hover:hover:before {
  opacity: 0
}

.button--disabled,
.button.disabled,
.button[disabled] {
  background-color: #ededed;
  color: #d0d2d3;
  cursor: not-allowed
}

.button--disabled:after,
.button.disabled:after,
.button[disabled]:after {
  display: none
}

.button--disabled:hover,
.button.disabled:hover,
.button[disabled]:hover {
  color: #d0d2d3;
  box-shadow: none
}

.button--disabled:hover:after,
.button--disabled:hover:before,
.button.disabled:hover:after,
.button.disabled:hover:before,
.button[disabled]:hover:after,
.button[disabled]:hover:before {
  opacity: 0
}

.body--high-contrast .button--disabled,
.body--high-contrast .button.disabled,
.body--high-contrast .button[disabled] {
  background-color: #757575
}

.body--high-contrast .button--disabled:hover,
.body--high-contrast .button.disabled:hover,
.body--high-contrast .button[disabled]:hover {
  color: #fff
}

.button[target=_blank].button--small:not(.button--download):not(.button--arrow),
.inputfile+label.button[target=_blank]:not(.button--download):not(.button--arrow),
.rte--small a.button[target=_blank]:not(.button--download):not(.button--arrow) {
  padding-left: 2rem
}

.button[target=_blank].button--small:not(.button--download):not(.button--arrow):before,
.inputfile+label.button[target=_blank]:not(.button--download):not(.button--arrow):before,
.rte--small a.button[target=_blank]:not(.button--download):not(.button--arrow):before {
  position: absolute;
  top: 50%;
  padding-left: 1.5rem;
  height: .75rem;
  margin-left: .5rem;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%)
}

.button--arrow,
.button--download,
.button[target=_blank] {
  display: inline-block
}

.button--arrow:hover,
.button--download:hover,
.button[target=_blank]:hover {
  background-color: #eaeaea
}

.button--arrow:hover:before,
.button--download:hover:before,
.button[target=_blank]:hover:before {
  opacity: 1
}

.body--theme1 .button--arrow.button--color:hover,
.body--theme1 .button--download.button--color:hover,
.body--theme1 .button[target=_blank].button--color:hover {
  background-color: #dd9617
}

.body--theme2 .button--arrow.button--color:hover,
.body--theme2 .button--download.button--color:hover,
.body--theme2 .button[target=_blank].button--color:hover {
  background-color: #d72c30
}

.body--theme3 .button--arrow.button--color:hover,
.body--theme3 .button--download.button--color:hover,
.body--theme3 .button[target=_blank].button--color:hover {
  background-color: #3fa670
}

.body--theme4 .button--arrow.button--color:hover,
.body--theme4 .button--download.button--color:hover,
.body--theme4 .button[target=_blank].button--color:hover {
  background-color: #3e85bf
}

.body--high-contrast .button--arrow.button--color:hover,
.body--high-contrast .button--download.button--color:hover,
.body--high-contrast .button[target=_blank].button--color:hover {
  background-color: #58595b
}

.button--arrow.button--color:hover:before,
.button--download.button--color:hover:before,
.button[target=_blank].button--color:hover:before {
  opacity: 1
}

.button--arrow:before,
.button--download:before,
.button[target=_blank]:before {
  display: inline-block;
  height: 1rem;
  width: 1rem;
  margin-right: .5rem;
  position: static;
  background-size: contain;
  background-position: 50%;
  background-repeat: no-repeat;
  opacity: 1;
  background-color: transparent;
  box-shadow: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='%23fff' d='M448 279.196V464c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h248a24 24 0 0116.97 7.029l16 16C344.09 102.149 333.382 128 312 128H64v320h320V295.196c0-6.365 2.529-12.47 7.029-16.971l16-16C422.148 247.106 448 257.814 448 279.196zM576 37.333C576 16.715 559.285 0 538.667 0H380c-15.464 0-28 12.536-28 28v17.885c0 15.766 13.011 28.424 28.772 27.989l67.203-1.906L199.09 319.09c-9.429 9.363-9.457 24.605-.061 34.001l23.879 23.879c9.396 9.396 24.639 9.369 34.001-.06l247.122-248.885-1.906 67.203c-.434 15.76 12.224 28.772 27.99 28.772H548c15.464 0 28-12.536 28-28V37.333z'/%3E%3C/svg%3E");
  content: ""
}

.button--download:before {
  opacity: 1;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23fff' d='M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z'/%3E%3C/svg%3E") !important
}

.button--arrow,
.button--readmore {
  padding-right: 2.5rem
}

.button--arrow:before,
.button--readmore:before {
  opacity: 1 !important;
  position: absolute !important;
  right: 0 !important;
  left: auto !important;
  top: 50% !important;
  margin-right: .75rem !important;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%)
}

.body--theme1 .button--arrow:before,
.body--theme1 .button--readmore:before {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23f5a61a' d='M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z'/%3E%3C/svg%3E") !important
}

.body--theme2 .button--arrow:before,
.body--theme2 .button--readmore:before {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23ee3135' d='M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z'/%3E%3C/svg%3E") !important
}

.body--theme3 .button--arrow:before,
.body--theme3 .button--readmore:before {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%2345b97c' d='M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z'/%3E%3C/svg%3E") !important
}

.body--theme4 .button--arrow:before,
.body--theme4 .button--readmore:before {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%234594d3' d='M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z'/%3E%3C/svg%3E") !important
}

.body--high-contrast .button--arrow:before,
.body--high-contrast .button--readmore:before,
.button--color.button--arrow:before {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23fff' d='M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z'/%3E%3C/svg%3E") !important
}

.button--entries {
  height: 100%;
  width: 100%;
  padding: .5rem;
  flex-wrap: wrap
}

.button--entries[target=_blank] {
  display: inline-flex
}

.button--entries[target=_blank]:before {
  display: none
}

.button--entries span {
  overflow-wrap: break-word;
  display: block;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto
}

.button--entries.button--icon {
  display: flex;
  justify-content: flex-start;
  flex-wrap: nowrap;
  text-align: left
}

.button--entries.button--icon:before {
  display: none
}

@media (min-width:768px) {
  .button--entries.button--icon {
      flex-wrap: wrap;
      flex-direction: column;
      justify-content: center
  }
}

@media (min-width:1024px) {
  .button--entries.button--icon {
      position: relative
  }

  .button--entries.button--icon span.icon {
      position: static
  }

  .button--entries.button--icon span.icon:before {
      position: absolute;
      right: 0;
      bottom: 0;
      display: block;
      width: 1.5rem;
      height: 100%;
      opacity: 0;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: 100% 100%;
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 23 56' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M23 0v56H0z' fill-rule='evenodd'/%3E%3C/svg%3E");
      content: "";
      margin-right: -1px;
      -webkit-transform: translateX(10px);
      transform: translateX(10px);
      transition: -webkit-transform .15s ease-in-out;
      transition: transform .15s ease-in-out;
      transition: transform .15s ease-in-out, -webkit-transform .15s ease-in-out
  }

  .body--high-contrast .button--entries.button--icon span.icon:before {
      display: none
  }

  .button--entries.button--icon span:not(.icon) {
      padding-left: 1.5rem !important;
      padding-right: 1.5rem !important
  }

  .button--entries.button--icon:hover:after {
      display: none
  }

  .button--entries.button--icon:hover span.icon:before {
      opacity: 1;
      -webkit-transform: translateX(0);
      transform: translateX(0)
  }
}

.button--entries.button--icon .icon {
  width: 2rem;
  height: 2rem;
  margin-right: .5rem;
  flex: 0 1 auto;
  flex-shrink: 0
}

.button--entries.button--icon .icon img {
  height: 2rem;
  display: block;
  margin-left: auto;
  margin-right: auto
}

@media (min-width:768px) {
  .button--entries.button--icon .icon {
      width: 100%;
      height: 2.5rem;
      margin-right: 0;
      margin-top: .5rem;
      margin-bottom: .75rem
  }

  .button--entries.button--icon .icon img {
      height: 2.5rem
  }
}

.button--entries.button--icon span:not(.icon) {
  text-align: left;
  flex: 1 1 auto;
  padding-left: .5rem;
  font-size: 1rem
}

@media (min-width:768px) {
  .button--entries.button--icon span:not(.icon) {
      text-align: center;
      margin-bottom: .25rem;
      font-weight: 400;
      max-width: 20rem
  }
}

.button--circle[target=_blank] {
  display: inline-flex
}

.button--circle[target=_blank]:before {
  display: none
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<!doctype html>
<html lang="nl">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Buttons</title>
  </head>
  <body class="body--theme1">
    <div class="flex w-full mb-2">
                     <div class="flex-initial mr-4 my-2">

                        <a id="" href="#" class="button button--color">

                           <span>Text only</span>
                        </a>


                     </div>
                     <div class="flex-initial mr-4 my-2">

                        <a id="" href="#" class="button button--color">

                           <span>Text + Icon</span><span class="icon fill-current  icon--arrow-right"><svg
                                 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" aria-hidden="true"
                                 focusable="false">
                                 <path 
                                    d="M218.101 38.101L198.302 57.9c-4.686 4.686-4.686 12.284 0 16.971L353.432 230H12c-6.627 0-12 5.373-12 12v28c0 6.627 5.373 12 12 12h341.432l-155.13 155.13c-4.686 4.686-4.686 12.284 0 16.971l19.799 19.799c4.686 4.686 12.284 4.686 16.971 0l209.414-209.414c4.686-4.686 4.686-12.284 0-16.971L235.071 38.101c-4.686-4.687-12.284-4.687-16.97 0z">
                                 </path>
                              </svg></span>
                        </a>


                     </div>
                     <div class="flex-initial mr-4 my-2">

                        <a id="" href="#" class="button button--color">

                           <span class="icon fill-current  icon--arrow-left"><svg xmlns="http://www.w3.org/2000/svg"
                                 viewBox="0 0 448 512" aria-hidden="true" focusable="false">
                                 <path 
                                    d="M229.9 473.899l19.799-19.799c4.686-4.686 4.686-12.284 0-16.971L94.569 282H436c6.627 0 12-5.373 12-12v-28c0-6.627-5.373-12-12-12H94.569l155.13-155.13c4.686-4.686 4.686-12.284 0-16.971L229.9 38.101c-4.686-4.686-12.284-4.686-16.971 0L3.515 247.515c-4.686 4.686-4.686 12.284 0 16.971L212.929 473.9c4.686 4.686 12.284 4.686 16.971-.001z">
                                 </path>
                              </svg></span><span>Icon + Text</span>
                        </a>


                     </div>
                  </div>
                  <div class="w-full mb-2 my-2">
                     <a href="https://google.com" target="_blank"
                        class="button button--color">Button New Page</a>
                  </div>
                  <div class="w-full mb-2 my-2">
                     <a href="#" class="button button--color button--download">Button Download</a>
                  </div>
                  <div class="w-full mb-2 my-2">
                     <a href="#" class="button button--color button--arrow">Button Pijl</a>       
                  </div>
               </div>
  </body>
</html>

In my project I have some links that open in new tabs/windows by using the attribute target="_blank" I use JavaScript to both create a tooltip and screen reader only text, which show and/or tell that those links open in new tabs/windows. The script in combination with CSS also adds Font Awesome icons after the link to show if the link open in a new window or downloads a file. I could prevent this happening in buttons by using the :not() CSS pseudo-class, as shown here:

a.new-window:not(.button)::after,
a.download:not(.button)::after {
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-left: 0.35rem
}

a.new-window:not(.button)::after {
  content: "\f08e"
}

a.download:not(.button)::after {
  content: "\f019"
}

That works fine for standard links. However, when I use buttons that contain these links that open in new tabs/windows the screen reader only text (in Dutch!) is also displayed in the buttons, as shown in the following image. Button displaying screen reader only text I tried to visually hide the screen reader only text:

.sr-only {
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
  }

This also worked well, but where the text was displayed now only shows empty button space, as shown in the following image.Button where screen reader only text is hidden, but shows empty button space

Is there another solution in which the screen reader only text is not displayed in the button and also not leaves a lot of empty button space?

Solution

  • you .button span style overwrites the .sr-only class and set the position to relative. Removing this fixes this.

    /** Add new-window and download classes automatically to links **/
$('a[target=_blank]').addClass('new-window');
$("a").filter(function () {
   return $(this).attr("href").match(/\.(pdf|doc|docx|ppt|pptx|xls|xlxs|epub|odt|odp|ods|txt|rtf)$/i);
}).addClass('download');

/** Links JavaScript **/
/* Check for links in document */
var links = document.querySelectorAll("a");
/* Create index for download links unique id*/
var downloadIndex = 0;
/* Create index for new window links unique id*/
var newWindowIndex = 0;
/* Check links on page */
for (var linkIndex = 0; linkIndex < links.length; linkIndex++) {
   /* Creating a span to wrap the screen-reader text */
   var srTxtWrapper = document.createElement("span");
   /* Add class .sr-only to screen-reader span */
   srTxtWrapper.classList.add("sr-only");

   if (links[linkIndex].classList.contains("download")) {
      /* Add download attribute */
      links[linkIndex].setAttribute("download", "");
      /* Add unique id to download link */
      links[linkIndex].setAttribute("id", "download-file-" + downloadIndex);
      /* Add title attribute saying download file */
      links[linkIndex].setAttribute("title", "download bestand");
      /* Add data-toggle tooltip data attribute */
      links[linkIndex].setAttribute("data-toggle", "tooltip");
      /* Creating the screen-reader text */
      var srTxt = document.createTextNode("(deze link downloadt een bestand)");
      /* Adding the screen-reader text to the span*/
      srTxtWrapper.appendChild(srTxt);
      links[linkIndex].appendChild(srTxtWrapper);
      /* Increase downloadIndex by one for next download link */
      downloadIndex++;
   }
   else if (links[linkIndex].classList.contains("new-window")) {
      /* Add target _blank attribute for link to open in new window */
      links[linkIndex].setAttribute("target", "_blank");
      /* Add unique id to new window link */
      links[linkIndex].setAttribute("id", "new-window" + newWindowIndex);
      /* Add title attribute saying link opens in new window */
      links[linkIndex].setAttribute("title", "open in nieuw venster/tab");
      /* Add data-toggle tooltip data attribute */
      links[linkIndex].setAttribute("data-toggle", "tooltip");
      /* Creating the screen-reader text */
      var srTxt = document.createTextNode("(deze link opent in een nieuw venster/tab)");
      /* Adding the screen-reader text to the span*/
      srTxtWrapper.appendChild(srTxt);
      links[linkIndex].appendChild(srTxtWrapper);
      /* Increase newWindowIndex by one for next newWindow link */
      newWindowIndex++;
   }
}
    .body--theme1 {
  --brand-color: #ffcb05;
  --brand-color-darker: #f5a61a;
  --brand-color-lighter: #fff578;
  --brand-color-lighter-rgba: 255, 245, 120;
  --color-marker: 255, 255, 153;
}

.body--theme2 {
  --brand-color: #f16682;
  --brand-color-darker: #ee3135;
  --brand-color-lighter: #f287b7;
  --brand-color-lighter-rgba: 242, 135, 183;
  --color-marker: 255, 102, 153;
}

.body--theme3 {
  --brand-color: #b1d249;
  --brand-color-darker: #45b97c;
  --brand-color-lighter: #d5e05b;
  --brand-color-lighter-rgba: 213, 224, 91;
  --color-marker: 153, 255, 51;
}

.body--theme4 {
  --brand-color: #1ebcc5;
  --brand-color-darker: #4594d3;
  --brand-color-lighter: #84d0d9;
  --brand-color-lighter-rgba: 132, 208, 217;
  --color-marker: 51, 153, 255;
}

.button {
  position: relative;
  z-index: 10;
  color: #808184;
  background-color: #f6f6f6;
  font-family: Roboto, sans-serif;
  font-weight: 700;
  line-height: 1.125;
  text-align: center;
  font-size: 1.125rem;
  display: inline-block;
  padding: .75rem 1.25rem;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: all .2s ease-in-out
}

.button:before {
  z-index: 40;
  background-color: #000
}

.button:after,
.button:before {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: block;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);
  opacity: 0;
  content: "";
  transition: opacity .2s ease-in-out
}

.button:after {
  z-index: 0
}

.button:hover:before {
  opacity: .05
}

.button:hover:after {
  opacity: .5
}

.button span {
  margin-left: .25rem;
  margin-right: .25rem;
  z-index: 50
}

.button .icon {
  width: 1rem;
  height: 1rem;
  display: inline-block
}

.button .icon:after {
  display: none
}

.button--small,
.inputfile+label,
.rte--small a.button {
  padding: .75rem;
  font-size: .875rem;
  font-weight: 400
}

.button--small .icon,
.inputfile+label .icon,
.rte--small a.button .icon {
  width: .75rem;
  height: .75rem
}

.button--small .icon--external-link,
.inputfile+label .icon--external-link,
.rte--small a.button .icon--external-link {
  width: 1rem;
  height: 1rem
}

.button--small.button--circle,
.inputfile+label.button--circle,
.rte--small a.button--circle.button {
  height: 2rem;
  width: 2rem
}

.button--small.button--circle .icon,
.inputfile+label.button--circle .icon,
.rte--small a.button--circle.button .icon {
  height: 1rem;
  width: 1rem
}

.button--large {
  padding: .75rem 2.5rem;
  font-size: 1.75rem
}

.button--large span {
  margin-left: .5rem;
  margin-right: .5rem
}

.button--large .icon {
  width: 1.5rem;
  height: 1.5rem
}

.button--large.button--circle {
  height: 3rem;
  width: 3rem
}

@media (min-width:640px) {
  .button--large.button--circle {
      height: 4rem;
      width: 4rem
  }

  .button--large.button--circle .icon {
      width: 2rem;
      height: 2rem
  }
}

.button--xlarge {
  padding: 1rem 2.5rem;
  font-size: 1.75rem
}

.button--xlarge span {
  margin-left: .5rem;
  margin-right: .5rem
}

.button--xlarge .icon {
  width: 1.5rem;
  height: 1.5rem
}

.button--xlarge.button--circle {
  height: 4rem;
  width: 4rem;
  font-size: 1.875rem
}

.button--xlarge.button--circle .icon {
  width: 2.5rem;
  height: 2.5rem
}

@media (min-width:768px) {
  .button--xlarge.button--circle {
      height: 5rem;
      width: 5rem
  }
}

@media (min-width:768px) {
  .button--xlarge {
      font-size: 1.875rem
  }
}

.body--theme1 .button--color,
.button--name {
  background-color: #f5a61a;
  color: #fff
}

.body--theme1 .button--color:hover:before,
.button--name:hover:before {
  opacity: .1
}

.body--theme1 .button--color:hover:after,
.button--name:hover:after {
  opacity: .5
}

.body--theme1 .button--color-remove-hover:hover:after,
.body--theme1 .button--color-remove-hover:hover:before,
.button--name-remove-hover:hover:after,
.button--name-remove-hover:hover:before {
  opacity: 0
}

.body--theme2 .button--color,
.button--name {
  background-color: #ee3135;
  color: #fff
}

.body--theme2 .button--color:hover:before,
.button--name:hover:before {
  opacity: .1
}

.body--theme2 .button--color:hover:after,
.button--name:hover:after {
  opacity: .5
}

.body--theme2 .button--color-remove-hover:hover:after,
.body--theme2 .button--color-remove-hover:hover:before,
.button--name-remove-hover:hover:after,
.button--name-remove-hover:hover:before {
  opacity: 0
}

.body--theme3 .button--color,
.button--name {
  background-color: #45b97c;
  color: #fff
}

.body--theme3 .button--color:hover:before,
.button--name:hover:before {
  opacity: .1
}

.body--theme3 .button--color:hover:after,
.button--name:hover:after {
  opacity: .5
}

.body--theme3 .button--color-remove-hover:hover:after,
.body--theme3 .button--color-remove-hover:hover:before,
.button--name-remove-hover:hover:after,
.button--name-remove-hover:hover:before {
  opacity: 0
}

.body--theme4 .button--color,
.button--name {
  background-color: #4594d3;
  color: #fff
}

.body--theme4 .button--color:hover:before,
.button--name:hover:before {
  opacity: .1
}

.body--theme4 .button--color:hover:after,
.button--name:hover:after {
  opacity: .5
}

.body--theme4 .button--color-remove-hover:hover:after,
.body--theme4 .button--color-remove-hover:hover:before,
.button--name-remove-hover:hover:after,
.button--name-remove-hover:hover:before {
  opacity: 0
}

.button--disabled,
.button.disabled,
.button[disabled] {
  background-color: #ededed;
  color: #d0d2d3;
  cursor: not-allowed
}

.button--disabled:after,
.button.disabled:after,
.button[disabled]:after {
  display: none
}

.button--disabled:hover,
.button.disabled:hover,
.button[disabled]:hover {
  color: #d0d2d3;
  box-shadow: none
}

.button--disabled:hover:after,
.button--disabled:hover:before,
.button.disabled:hover:after,
.button.disabled:hover:before,
.button[disabled]:hover:after,
.button[disabled]:hover:before {
  opacity: 0
}

.body--high-contrast .button--disabled,
.body--high-contrast .button.disabled,
.body--high-contrast .button[disabled] {
  background-color: #757575
}

.body--high-contrast .button--disabled:hover,
.body--high-contrast .button.disabled:hover,
.body--high-contrast .button[disabled]:hover {
  color: #fff
}

.button[target=_blank].button--small:not(.button--download):not(.button--arrow),
.inputfile+label.button[target=_blank]:not(.button--download):not(.button--arrow),
.rte--small a.button[target=_blank]:not(.button--download):not(.button--arrow) {
  padding-left: 2rem
}

.button[target=_blank].button--small:not(.button--download):not(.button--arrow):before,
.inputfile+label.button[target=_blank]:not(.button--download):not(.button--arrow):before,
.rte--small a.button[target=_blank]:not(.button--download):not(.button--arrow):before {
  position: absolute;
  top: 50%;
  padding-left: 1.5rem;
  height: .75rem;
  margin-left: .5rem;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%)
}

.button--arrow,
.button--download,
.button[target=_blank] {
  display: inline-block
}

.button--arrow:hover,
.button--download:hover,
.button[target=_blank]:hover {
  background-color: #eaeaea
}

.button--arrow:hover:before,
.button--download:hover:before,
.button[target=_blank]:hover:before {
  opacity: 1
}

.body--theme1 .button--arrow.button--color:hover,
.body--theme1 .button--download.button--color:hover,
.body--theme1 .button[target=_blank].button--color:hover {
  background-color: #dd9617
}

.body--theme2 .button--arrow.button--color:hover,
.body--theme2 .button--download.button--color:hover,
.body--theme2 .button[target=_blank].button--color:hover {
  background-color: #d72c30
}

.body--theme3 .button--arrow.button--color:hover,
.body--theme3 .button--download.button--color:hover,
.body--theme3 .button[target=_blank].button--color:hover {
  background-color: #3fa670
}

.body--theme4 .button--arrow.button--color:hover,
.body--theme4 .button--download.button--color:hover,
.body--theme4 .button[target=_blank].button--color:hover {
  background-color: #3e85bf
}

.body--high-contrast .button--arrow.button--color:hover,
.body--high-contrast .button--download.button--color:hover,
.body--high-contrast .button[target=_blank].button--color:hover {
  background-color: #58595b
}

.button--arrow.button--color:hover:before,
.button--download.button--color:hover:before,
.button[target=_blank].button--color:hover:before {
  opacity: 1
}

.button--arrow:before,
.button--download:before,
.button[target=_blank]:before {
  display: inline-block;
  height: 1rem;
  width: 1rem;
  margin-right: .5rem;
  position: static;
  background-size: contain;
  background-position: 50%;
  background-repeat: no-repeat;
  opacity: 1;
  background-color: transparent;
  box-shadow: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='%23fff' d='M448 279.196V464c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h248a24 24 0 0116.97 7.029l16 16C344.09 102.149 333.382 128 312 128H64v320h320V295.196c0-6.365 2.529-12.47 7.029-16.971l16-16C422.148 247.106 448 257.814 448 279.196zM576 37.333C576 16.715 559.285 0 538.667 0H380c-15.464 0-28 12.536-28 28v17.885c0 15.766 13.011 28.424 28.772 27.989l67.203-1.906L199.09 319.09c-9.429 9.363-9.457 24.605-.061 34.001l23.879 23.879c9.396 9.396 24.639 9.369 34.001-.06l247.122-248.885-1.906 67.203c-.434 15.76 12.224 28.772 27.99 28.772H548c15.464 0 28-12.536 28-28V37.333z'/%3E%3C/svg%3E");
  content: ""
}

.button--download:before {
  opacity: 1;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23fff' d='M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z'/%3E%3C/svg%3E") !important
}

.button--arrow,
.button--readmore {
  padding-right: 2.5rem
}

.button--arrow:before,
.button--readmore:before {
  opacity: 1 !important;
  position: absolute !important;
  right: 0 !important;
  left: auto !important;
  top: 50% !important;
  margin-right: .75rem !important;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%)
}

.body--theme1 .button--arrow:before,
.body--theme1 .button--readmore:before {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23f5a61a' d='M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z'/%3E%3C/svg%3E") !important
}

.body--theme2 .button--arrow:before,
.body--theme2 .button--readmore:before {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23ee3135' d='M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z'/%3E%3C/svg%3E") !important
}

.body--theme3 .button--arrow:before,
.body--theme3 .button--readmore:before {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%2345b97c' d='M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z'/%3E%3C/svg%3E") !important
}

.body--theme4 .button--arrow:before,
.body--theme4 .button--readmore:before {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%234594d3' d='M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z'/%3E%3C/svg%3E") !important
}

.body--high-contrast .button--arrow:before,
.body--high-contrast .button--readmore:before,
.button--color.button--arrow:before {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23fff' d='M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z'/%3E%3C/svg%3E") !important
}

.button--entries {
  height: 100%;
  width: 100%;
  padding: .5rem;
  flex-wrap: wrap
}

.button--entries[target=_blank] {
  display: inline-flex
}

.button--entries[target=_blank]:before {
  display: none
}

.button--entries span {
  overflow-wrap: break-word;
  display: block;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto
}

.button--entries.button--icon {
  display: flex;
  justify-content: flex-start;
  flex-wrap: nowrap;
  text-align: left
}

.button--entries.button--icon:before {
  display: none
}

@media (min-width:768px) {
  .button--entries.button--icon {
      flex-wrap: wrap;
      flex-direction: column;
      justify-content: center
  }
}

@media (min-width:1024px) {
  .button--entries.button--icon {
      position: relative
  }

  .button--entries.button--icon span.icon {
      position: static
  }

  .button--entries.button--icon span.icon:before {
      position: absolute;
      right: 0;
      bottom: 0;
      display: block;
      width: 1.5rem;
      height: 100%;
      opacity: 0;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: 100% 100%;
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 23 56' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M23 0v56H0z' fill-rule='evenodd'/%3E%3C/svg%3E");
      content: "";
      margin-right: -1px;
      -webkit-transform: translateX(10px);
      transform: translateX(10px);
      transition: -webkit-transform .15s ease-in-out;
      transition: transform .15s ease-in-out;
      transition: transform .15s ease-in-out, -webkit-transform .15s ease-in-out
  }

  .body--high-contrast .button--entries.button--icon span.icon:before {
      display: none
  }

  .button--entries.button--icon span:not(.icon) {
      padding-left: 1.5rem !important;
      padding-right: 1.5rem !important
  }

  .button--entries.button--icon:hover:after {
      display: none
  }

  .button--entries.button--icon:hover span.icon:before {
      opacity: 1;
      -webkit-transform: translateX(0);
      transform: translateX(0)
  }
}

.button--entries.button--icon .icon {
  width: 2rem;
  height: 2rem;
  margin-right: .5rem;
  flex: 0 1 auto;
  flex-shrink: 0
}

.button--entries.button--icon .icon img {
  height: 2rem;
  display: block;
  margin-left: auto;
  margin-right: auto
}

@media (min-width:768px) {
  .button--entries.button--icon .icon {
      width: 100%;
      height: 2.5rem;
      margin-right: 0;
      margin-top: .5rem;
      margin-bottom: .75rem
  }

  .button--entries.button--icon .icon img {
      height: 2.5rem
  }
}

.button--entries.button--icon span:not(.icon) {
  text-align: left;
  flex: 1 1 auto;
  padding-left: .5rem;
  font-size: 1rem
}

@media (min-width:768px) {
  .button--entries.button--icon span:not(.icon) {
      text-align: center;
      margin-bottom: .25rem;
      font-weight: 400;
      max-width: 20rem
  }
}

.button--circle[target=_blank] {
  display: inline-flex
}

.button--circle[target=_blank]:before {
  display: none
}
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<!doctype html>
<html lang="nl">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Buttons</title>
  </head>
  <body class="body--theme1">
    <div class="flex w-full mb-2">
                     <div class="flex-initial mr-4 my-2">

                        <a id="" href="#" class="button button--color">

                           <span>Text only</span>
                        </a>


                     </div>
                     <div class="flex-initial mr-4 my-2">

                        <a id="" href="#" class="button button--color">

                           <span>Text + Icon</span><span class="icon fill-current  icon--arrow-right"><svg
                                 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" aria-hidden="true"
                                 focusable="false">
                                 <path 
                                    d="M218.101 38.101L198.302 57.9c-4.686 4.686-4.686 12.284 0 16.971L353.432 230H12c-6.627 0-12 5.373-12 12v28c0 6.627 5.373 12 12 12h341.432l-155.13 155.13c-4.686 4.686-4.686 12.284 0 16.971l19.799 19.799c4.686 4.686 12.284 4.686 16.971 0l209.414-209.414c4.686-4.686 4.686-12.284 0-16.971L235.071 38.101c-4.686-4.687-12.284-4.687-16.97 0z">
                                 </path>
                              </svg></span>
                        </a>


                     </div>
                     <div class="flex-initial mr-4 my-2">

                        <a id="" href="#" class="button button--color">

                           <span class="icon fill-current  icon--arrow-left"><svg xmlns="http://www.w3.org/2000/svg"
                                 viewBox="0 0 448 512" aria-hidden="true" focusable="false">
                                 <path 
                                    d="M229.9 473.899l19.799-19.799c4.686-4.686 4.686-12.284 0-16.971L94.569 282H436c6.627 0 12-5.373 12-12v-28c0-6.627-5.373-12-12-12H94.569l155.13-155.13c4.686-4.686 4.686-12.284 0-16.971L229.9 38.101c-4.686-4.686-12.284-4.686-16.971 0L3.515 247.515c-4.686 4.686-4.686 12.284 0 16.971L212.929 473.9c4.686 4.686 12.284 4.686 16.971-.001z">
                                 </path>
                              </svg></span><span>Icon + Text</span>
                        </a>


                     </div>
                  </div>
                  <div class="w-full mb-2 my-2">
                     <a href="https://google.com" target="_blank"
                        class="button button--color">Button New Page</a>
                  </div>
                  <div class="w-full mb-2 my-2">
                     <a href="#" class="button button--color button--download">Button Download</a>
                  </div>
                  <div class="w-full mb-2 my-2">
                     <a href="#" class="button button--color button--arrow">Button Pijl</a>       
                  </div>
               </div>
  </body>
</html>