Mobirise Tutorials

Animierte Buttons mit CSS und Linie

Hier die CSS der oben animierten Buttons, die ich hier gefunden habe: CSS Button Animations 

Kopiert diese CSS-Klassen in den Bereich "CSS Editor" vom Code Editor und gebt dem <a> Tag zusätzlich den Class-Namen eurer Wahl. Ich habe den Code für meine Seiten minimal modifiziert, basierend auf dem jeweiligen Original.

Hier die class="button" von den ersten beiden Buttons:

.button {
  transition: all .3s;
  position: relative;
  overflow: hidden;
  z-index: 1;
  &:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
  }
  &:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background-color: darken(#00ccff, 15%);
    transition: all .3s;
    border-radius: 10rem;
    z-index: -1;
  }
  &:hover {
    color: #fff;
    &:before {
      width: 100%;
    }
  }
}

Hier die class="glow-on-hover" vom 3. Button:

.glow-on-hover {
  height: 52px;
  border: none;
  outline: none;
  color: #fff;
  background: #111;
  cursor: pointer;
  position: relative;
  z-index: 0;
  border-radius: 10rem;
}
.glow-on-hover:before {
  content: '';
  background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
  position: absolute;
  top: -2px;
  left: -2px;
  background-size: 400%;
  z-index: -1;
  filter: blur(5px);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  animation: glowing 20s linear infinite;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  border-radius: 10rem;
}
.glow-on-hover:active {
  color: #000000;
}
.glow-on-hover:active:after {
  background: transparent;
}
.glow-on-hover:hover:before {
  opacity: 1;
}
.glow-on-hover:after {
  z-index: -1;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: #111;
  left: 0;
  top: 0;
  border-radius: 10rem;
}
@keyframes glowing {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 400% 0;
  }
  100% {
    background-position: 0 0;
  }
}

Drehender Button 1

Hier die class="btn-flip" vom ersten drehenden Button in der zweiten Reihe:

.btn-flip {
  opacity: 1;
  outline: 0;
  color: #fff;
  line-height: 40px;
  height: 40px;
  position: relative;
  text-align: center;
  display: inline-block;
  text-decoration: none;
  font-weight: bold;
  margin-left: 12px;
  &:hover {
    &:after {
      opacity: 1;
      transform: translateY(0) rotateX(0);
    }
    &:before {
      opacity: 0;
      transform: translateY(50%) rotateX(90deg);
    }
  }
  &:after {
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
    color: #fff;
    display: block;
    padding: 7px 20px;
    border-radius: 10px;
    transition: 0.5s;
    position: absolute;
    background: #ff6666;
    content: attr(data-back);
    transform: translateY(-50%) rotateX(90deg);
  }
  &:before {
    top: 0;
    left: 0;
    opacity: 1;
    color: #fff;
    display: block;
    padding: 7px 20px;
    border-radius: 30px;
    line-height: 40px;
    transition: 0.5s;
    position: relative;
    background: #6592e6;
    content: attr(data-front);
    transform: translateY(0) rotateX(0);
  }
}

Der erste drehende Button mit der class="btn-flip" benötigt ein eigenes <a> Tag. Tauscht entsprechend das vorhandene <a> Tag mit diesem hier. Setzt anstelle des Raute-Zeichens # die gewünschte URL und eure Texte ein:

<a href="#" class="btn-flip" data-back="Nach unten ⇩" data-front="Animierte Solide Linie"></a>

Drehender Button 2

Für den zweiten drehenden Button wollte ich unterschiedliche Farben und einen animierten Hintergrund gestalten. Daher habe ich die class"btn-flip2-color" zusätzlich erstellt und die entsprechende CSS unterhalb der des ersten drehenden Buttons eingefügt:

.btn-flip2-color:before {
  background: #1c5ac9;
}
@keyframes animateGradient {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}
.btn-flip2-color:after {
  background: linear-gradient(to right, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
  background-size: 300% 300%;
}
.btn-flip2-color:hover:after {
  animation: animateGradient 2s ease forwards;
}
/* Abstand zwischen den Schaltflächen am Smartphone, falls sie aufgrund der Länge umbrechen */
@media (max-width: 500px) {
  .btn-flip2-color {
  margin-top: 40px;
  }
}

Schreibt diese zusätzliche Class noch zu der Eltern-Klasse class="btn-flip" hinzu. Auch dieser zweite drehende Button, mit der zusätzlichen class="btn-flip2-color", benötigt ein eigenes <a> Tag. Tauscht entsprechend das vorhandene <a> Tag mit diesem hier. Setzt anstelle des Raute-Zeichens # die gewünschte URL und eure Texte ein:

<a href="#" class="btn-flip btn-flip2-color" data-back="Nach unten ⇩" data-front="Animierte Glow Linie"></a>