Buttons mit Richtungsempfindlichkeit

buttons-mit-richtungsempfindlichkeit.markdown

Buttons mit Richtungsempfindlichkeit

Angepasste Umsetzung einer Idee aus einem CSS-Tricks-Artikel:

https://css-tricks.com/ghost-buttons-with-directional-awareness-in-css/ https://codepen.io/jh3y/pen/jjRezM?editors=1100

A Pen by Jens Grochtdreis on CodePen.

License.

index.html

<button class="button button--direction-aware button--big button--animatable button--shadow">
    Kauf mich!
  <span class="button__bg1"></span>
  <span class="button__bg2"></span>
  <span class="button__bg3"></span>
  <span class="button__bg4"></span>
  <span class="button__text-animate1" aria-hidden="true">
    Kauf mich!
  </span>
  <span class="button__text-animate2" aria-hidden="true">
    Kauf mich!
  </span>
  <span class="button__text-animate3" aria-hidden="true">
    Kauf mich!
  </span>
  <span class="button__text-animate4" aria-hidden="true">
    Kauf mich!
  </span>
</button>

style.css

/* Basis - Reset */
.button {
  background-color: maroon;
  color: #fff;
  border: none;
  padding: 10px;
  font-size: 1rem;
  cursor: pointer;
}

/* grundlegende Modifikatoren */
.button--big {
  font-size: 4rem;
  padding: 0.25em 0.75em;
  border: 5px solid #000;
}

.button--animatable {
  position: relative;
  transition: box-shadow 0.15s ease;
}

.button--shadow {
  box-shadow: 4px 4px 0 #555;
}

/* die leeren SPAN-Elemente für den animierbaren Button */
[class*="button__bg"]  {
  position: absolute;
  opacity: 0.25;
  z-index: 1;
  top: -5px;
  right: -5px;
  bottom: -5px;
  left: -5px;
}

.button__bg:hover {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  z-index: 2;
}
/* die 4 Richtungen */
.button__bg1 {
  clip-path: polygon(0 0, 100% 0, 50% 50%, 50% 50%);
}
.button__bg2 {
  clip-path: polygon(100% 0, 100% 100%, 50% 50%);
}
.button__bg3 {
  clip-path: polygon(0 100%, 100% 100%, 50% 50%);
}
.button__bg4 {
  clip-path: polygon(0 0, 0 100%, 50% 50%);
}

/* Der reinfahrende Text */
[class*="button__text-animate"]  {
  position: absolute;
  top: -5px;
  right: -5px;
  bottom: -5px;
  left: -5px;

  border: 5px solid #000;
  clip-path: inset(0 0 100% 0);
  
  transition: all 0.25s ease;
  padding: 0.25em 0.75em;
  background: #f00;
  color: #fafafa;
}
.button__text-animate1 {
  clip-path: inset(0 0 100% 0);
  background: #00838F;
}
.button__text-animate2 {
  clip-path: inset(0 0 0 100%);
  background: #1E88E5;
}
.button__text-animate3 {
  clip-path: inset(100% 0 0 0);
  background: #BF360C;
}
.button__text-animate4 {
  clip-path: inset(0 100% 0 0);
  background: #000;
}

/* sichtbare Hovereffekte */
.button__bg1:hover ~ .button__text-animate1,
.button__bg2:hover ~ .button__text-animate2,
.button__bg3:hover ~ .button__text-animate3,
.button__bg4:hover ~ .button__text-animate4 {
  clip-path: inset(0 0 0 0);
}

styles

<link href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5028/basics_3.css" rel="stylesheet" />