Hallo, Gast!
AnmeldenRegistrieren

Button animation
#1
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%);
  }
}
 
#2
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...
 
#3
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.
 
#4
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
 
#5
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.
 
#6
(19.04.2020, 14: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
 
#7
(19.04.2020, 15:33)Jockl schrieb:
(19.04.2020, 14: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
 
#8
(19.04.2020, 14: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.
 
#9
(19.04.2020, 16:31)Schnapsnase schrieb:
(19.04.2020, 14: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
 
#10
(19.04.2020, 16: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
 


Möglicherweise verwandte Themen…
Animation in das Weiterleitungsfenster einbauen
Letzter Beitrag: 10.01.2007, 20:55
Loading-Animation hier aus dem Forum
Letzter Beitrag: 29.05.2006, 20:49