MyBB.de Forum
Button animation - Druckversion

+- MyBB.de Forum (https://www.mybb.de/forum)
+-- Forum: Anpassungen (https://www.mybb.de/forum/forum-47.html)
+--- Forum: Theme-Diskussionen (https://www.mybb.de/forum/forum-84.html)
+--- Thema: Button animation (/thread-37148.html)

Button animation - lenox - 18.04.2020

Moin moin.

ich bin gerade dabei meinen Buttons umzugestalten und komme da mit der css Klasse für Beitrag posten, Bearbeiten usw. nicht weiter.

Den New Thread Button bekomme ich hin, bei den bearbeiten Button weiß ich aber nicht wie ich es anpassen muss das auch die Animation angezeigt wird, bekomme nur den Button selbst angezeigt.

Ich habe zwei Stylesheets animated-postbutton.css und animated-button.css erstellt und in dem pf_forumdisplay_newthread(nicht wundern ist nen xthread template daher pf)

Code:
<a href="newthread.php?fid={$fid}" class="animated-button"><i class="fa fa-file-text"></i>&nbsp;&nbsp;Produkt vorstellen</a>


ersetzt mit


Code:
<a href="newthread.php?fid={$fid}" class="animated-button">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
<i class="fa fa-file-text"></i>&nbsp;&nbsp;Produkt vorstellen</a>
</a>


dort funktioniert es.

Nur wie bekomme ich es den anderen Buttons wie

Code:
<input type="submit" class="button" name="submit" value="Produkttest eintragen" tabindex="4" accesskey="s" />

hin, wenn ich nur die Klasse ändere wird der Button angezeigt aber nicht die Animation.

Vieleicht kann mir kurz jemand helfen der sich damit besser auskennt.

Das Stylesheet sieht so aus:

Code:
/*
* Animated CSS button
*/
.animated-button {
  background: linear-gradient(-30deg, #6f6b6b 50%, #444444 50%);
  padding: 10px 10px;
  margin: 12px;
  display: inline-block;
  -webkit-transform: translate(0%, 0%);
          transform: translate(0%, 0%);
  overflow: hidden;
  color: #d4e0f7;
  font-size: 14px;
  letter-spacing: 2.5px;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  -webkit-box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
          box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.animated-button::before {
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: #8592ad;
  opacity: 0;
  -webkit-transition: .2s opacity ease-in-out;
  transition: .2s opacity ease-in-out;
}

.animated-button:hover::before {
  opacity: 0.2;
}

.animated-button span {
  position: absolute;
}

.animated-button span:nth-child(1) {
  top: 0px;
  left: 0px;
  width: 100%;
  height: 2px;
  background: -webkit-gradient(linear, right top, left top, from(rgba(8, 20, 43, 0)), to(#2662d9));
  background: linear-gradient(to left, rgba(8, 20, 43, 0), #2662d9);
  -webkit-animation: 2s animateTop linear infinite;
          animation: 2s animateTop linear infinite;
}

@-webkit-keyframes animateTop {
  0% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}

@keyframes animateTop {
  0% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}

.animated-button span:nth-child(2) {
  top: 0px;
  right: 0px;
  height: 100%;
  width: 2px;
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(8, 20, 43, 0)), to(#2662d9));
  background: linear-gradient(to top, rgba(8, 20, 43, 0), #2662d9);
  -webkit-animation: 2s animateRight linear -1s infinite;
          animation: 2s animateRight linear -1s infinite;
}

@-webkit-keyframes animateRight {
  0% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
  100% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}

@keyframes animateRight {
  0% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
  100% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}

.animated-button span:nth-child(3) {
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 2px;
  background: -webkit-gradient(linear, left top, right top, from(rgba(8, 20, 43, 0)), to(#2662d9));
  background: linear-gradient(to right, rgba(8, 20, 43, 0), #2662d9);
  -webkit-animation: 2s animateBottom linear infinite;
          animation: 2s animateBottom linear infinite;
}

@-webkit-keyframes animateBottom {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}

@keyframes animateBottom {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}

.animated-button span:nth-child(4) {
  top: 0px;
  left: 0px;
  height: 100%;
  width: 2px;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(8, 20, 43, 0)), to(#2662d9));
  background: linear-gradient(to bottom, rgba(8, 20, 43, 0), #2662d9);
  -webkit-animation: 2s animateLeft linear -1s infinite;
          animation: 2s animateLeft linear -1s infinite;
}

@-webkit-keyframes animateLeft {
  0% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  100% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
}

@keyframes animateLeft {
  0% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  100% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
}


RE: Button animation - Schnapsnase - 18.04.2020

Welche Animationen möchtest Du denn wo darstellen?
Momentan kann man sich das nicht live anschauen wegen eines SQL-Errors.

Deine definierten Animationen werden doch momentan auf "span" angewendet...

RE: Button animation - lenox - 19.04.2020

Hi Schnapsnase,

ups da war wohl nen Fehler im Upload vom sql Backup.

Es handelt sich um die Animation hier und weiß nicht in was ich z. B. im New Thread Template beim "Thema absenden" Button
Code:
<input type="submit" class="button" name="submit" value="Produkttest eintragen" tabindex="4" accesskey="s" /> 
ändern muss damit der Border der um den Button kreist (ka wie ich das sonst nennen soll Smile ) ändern muss, bzw. wie ich das mit dem <span></span> mache.

Mit dem forumdisplay_newthread Template mit habe ich es ja verstanden, da dort nur href= , class, das icon und Sprachausgabe vorhanden war, nur die anderen Buttons für "Antwort absenden, Vorschau" usw sind ja anders aufgebaut und bekomme es nicht hin, das da auch der Border angezeigt wird.

RE: Button animation - Schnapsnase - 19.04.2020

Hi Lenox!

Ohne es jetzt genau getestet zu haben...., musst Du um das input-Element einen Container legen.
z.B.:
Code:
<div class="animated-button">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <input type="submit" name="submit" value="{$lang->post_thread}" tabindex="4" accesskey="s" />
</div>
dann zusätzlich in des css
Code:
.animated-button input {
  background: transparent;
  border: none;
}
Das sollte dann funktionieren

RE: Button animation - lenox - 19.04.2020

Hi
vielen dank, so funktioniert es.



Edit: Funktioniert leider doch nicht ganz den die Buttons bleiben ohne Funktion wenn man drauf klickt.

Und kann mir jemand sagen in welchen Template ich die Definition für den "Entwurf speichern" Button {$savedraftbutton}  finde.

RE: Button animation - Jockl - 19.04.2020

(19.04.2020, 15:29)lenox schrieb: Und kann mir jemand sagen in welchen Template ich die Definition für den "Entwurf speichern" Button {$savedraftbutton}  finde.

schon mal versucht, die Suchfunktion in der Template-Fkt. im ACP zu verwenden? Wink

RE: Button animation - lenox - 19.04.2020

(19.04.2020, 16:33)Jockl schrieb:
(19.04.2020, 15:29)lenox schrieb: Und kann mir jemand sagen in welchen Template ich die Definition für den "Entwurf speichern" Button {$savedraftbutton}  finde.

schon mal versucht, die Suchfunktion in der Template-Fkt. im ACP zu verwenden? Wink
Danke für den Tipp  Big Grin

RE: Button animation - Schnapsnase - 19.04.2020

(19.04.2020, 15:29)lenox schrieb: Edit: Funktioniert leider doch nicht ganz den die Buttons bleiben ohne Funktion wenn man drauf klickt.

Sorry, mein Versagen.
Gib dem input-Element die gleiche Klasse:
Code:
<div class="animated-button">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
<input type="submit" class="animated-button" name="submit" value="{$lang->post_thread}" tabindex="4" accesskey="s" />
</div>
Danach in der css den div-container anpassen.

RE: Button animation - lenox - 19.04.2020

(19.04.2020, 17:31)Schnapsnase schrieb:
(19.04.2020, 15:29)lenox schrieb: Edit: Funktioniert leider doch nicht ganz den die Buttons bleiben ohne Funktion wenn man drauf klickt.

Sorry, mein Versagen.
Gib dem input-Element die gleiche Klasse:
Code:
<div class="animated-button">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
<input type="submit" class="animated-button" name="submit" value="{$lang->post_thread}" tabindex="4" accesskey="s" />
</div>
Danach in der css den div-container anpassen.

Danke dir läuft nun alles  Smile

RE: Button animation - Schnapsnase - 19.04.2020

(19.04.2020, 17:59)lenox schrieb: Danke dir läuft nun alles  Smile

Gerne! Wink
Das geht sicher auch anders, aber Deine Animation war ja per copy&paste nun schon mal vorgegeben. Toungue