Button running border

weber.com button style

by Jens Kühn

HTML

<button class="bee__button bee__button--edgy bee__button--flyout bee__flyout__part">
<span class="bee__button__border">

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 64" preserveAspectRatio="none">
<rect class="stroke" x=".5" y=".5" width="199" height="63" stroke="red" fill="none" vector-effect="non-scaling-stroke" stroke-dasharray="3,2" rx="3" ry="3"></rect>
</svg>
</span>
<span class="bee__button__text">

Produktdetails

</span>
<span class="bee__button__wrapper">
<span class="bee__button__arrow-wrapper">
<span class="bee__button__arrow-down">

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 7">
<title>menu-arrow-down</title>
<g data-name="Layer 2">
<path d="M1 0l2.4 2.8h1.2L7 0l1 .4-3 5L4 7 3 5.4l-3-5z" fill="#fff" data-name="Layer 1"></path>
</g>
</svg>
</span>
<span class="bee__button__arrow-down">

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 7">
<title>menu-arrow-down</title>
<g data-name="Layer 2">
<path d="M1 0l2.4 2.8h1.2L7 0l1 .4-3 5L4 7 3 5.4l-3-5z" fill="#fff" data-name="Layer 1"></path>
</g>
</svg>
</span>
</span>
</span>
</button>

CSS

svg:not(:root) {
  overflow: hidden;
}

.bee__button--flyout {
  outline: 0;
  text-decoration: none;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-family: DIN-Next-LT-Pro-Cond, 'Arial Narrow', Arial, Helvetica, sans-serif;
  padding: 23px 24px;
  font-size: 16px;
  color: #696969;
  -webkit-transition: border .2s cubic-bezier(.25, .25, .75, .75), background .2s cubic-bezier(.25, .25, .75, .75), color .2s cubic-bezier(.25, .25, .75, .75);
  transition: border .2s cubic-bezier(.25, .25, .75, .75), background .2s cubic-bezier(.25, .25, .75, .75), color .2s cubic-bezier(.25, .25, .75, .75);
  white-space: nowrap;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  height: 64px;
  border: none;
  position: relative;
  font-weight: 600;
  cursor: pointer;
  background: transparent
}

.bee__button--flyout .bee__button__border {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.bee__button__text {
  padding: 0 !important;
  border: 0;
  color: #1a1a1a;
  background: 0 0;
}

.bee__button--flyout .bee__button__text {
  display: inline-block;
  vertical-align: top;
  color: #1a1a1a;
}

.bee__button--flyout .bee__button__wrapper {
  margin-left: 15px;
  vertical-align: top;
  height: 17px;
  width: 17px;
  display: inline-block;
  position: relative;
  border-style: solid;
  border-color: #e01c1c;
  border-width: 1px;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  overflow: hidden;
  -webkit-transition: border .2s cubic-bezier(.25, .25, .75, .75);
  transition: border .2s cubic-bezier(.25, .25, .75, .75);
}

.bee__button--flyout .bee__button__arrow-wrapper {
  height: 200%;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}

.bee__button--flyout...