extendo fabuloso

extendo-fabuloso.markdown

extendo fabuloso

A Pen by Henry Blyth on CodePen.

License.

index.html

<button class="extendor" onclick="invert()">wow fab x</button>

<pre>[click the button for funsies]</pre>

<footer hidden>
  <p>Dedicated to my late mum</p>
  <p>She would always end her texts with a variant on "fab x" or "wow fab x"</p>
  <p>💖💖💖</p>
</footer>

script.js

var count = 0;
function invert() {
  document.body.classList.toggle('invert');
  count++;
  if (count > 3) {
    document.querySelectorAll('[hidden]').forEach(el => el.hidden = false);
  }
}

style.scss

@mixin extendor($extend, $border: 0px) {
  position: relative;
  border-width: $border;
  margin: $extend;
  &, &::before, &::after {
    transition: transform 100ms ease-in-out;
  }
  &::before, &::after {
    content: '';
    position: absolute;
    border: 0 solid transparent;
    z-index: -1;
    transition-property: border-width, top, left, bottom, right;
  }

  &::before {
    top: -$border;
    right: calc(100% + #{$border});
    bottom: -$border;
    border-right-color: inherit;
  }
  &::after {
    top: calc(100% + #{$border});
    left: -$border;
    right: -$border;
    border-top-color: inherit;
  }
  
  &:hover, &:focus {
    &::before {
      border-top-width: $extend;
      border-right-width: $extend;
      bottom: -($extend + $border);
    }
    &::after {
      border-top-width: $extend;
      border-right-width: $extend;
      left: -($extend + $border);
    }
  }
  &:active {
    transform: translateX(-$border) translateY($border);
    &, &::before, &::after {
      transition-duration: 50ms;
    }
    &::before {
      border-top-width: $extend - $border;
      border-right-width: $extend - $border;
      bottom: -$extend;
    }
    &::after {
      border-top-width: $extend - $border;
      border-right-width: $extend - $border;
      left: -$extend;
    }
  }
}

.extendor {
  padding: 10px;
  display: inline-block;
  @include extendor(6px, 2px); // odd total number can produce half-pixel rendering oddities
  min-width: 100px;
  min-height: 44px;
}

button {
  appearance: none;
  cursor: pointer;
  color: inherit;
  font-size: inherit;
  margin: 1em 0;
  background: none;
  border-color: inherit;
  border-style: solid;
}

body {
  background-color: white;
  color: black;
  font-family: Helvetica, sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 500px;
  &.invert {
    background-color: black;
    color: white;
  }
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: initial;
  visibility: hidden;
}