Hallo, Gast! ( — Registrieren)

Letzte Ankündigung: MyBB 1.8.38 veröffentlicht (30.04.24)


Benutzer, die gerade dieses Thema anschauen: 4 Gast/Gäste
Baumstrukturmodus
Button animation
lenox Offline
Erfahrener
****
Beiträge: 714
Themen: 58
Registriert seit: 20.10.2016
MyBB-Version: 1.8.xx
#1
18.04.2020, 17:10
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%);
  }
}
mfg
lenox
https://angel-juenger.de
Suchen
Zitieren
Schnapsnase Offline
Nec scire fas est omnia
*****
Beiträge: 2.239
Themen: 33
Registriert seit: 25.05.2018
MyBB-Version: 1.8.38
#2
18.04.2020, 17:46
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...
Homepage Suchen
Zitieren
lenox Offline
Erfahrener
****
Beiträge: 714
Themen: 58
Registriert seit: 20.10.2016
MyBB-Version: 1.8.xx
#3
18.04.2020, 23:53
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.
mfg
lenox
https://angel-juenger.de
Suchen
Zitieren
Schnapsnase Offline
Nec scire fas est omnia
*****
Beiträge: 2.239
Themen: 33
Registriert seit: 25.05.2018
MyBB-Version: 1.8.38
#4
19.04.2020, 12:10 (Dieser Beitrag wurde zuletzt bearbeitet: 19.04.2020, 12:10 von Schnapsnase.)
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
Homepage Suchen
Zitieren
lenox Offline
Erfahrener
****
Beiträge: 714
Themen: 58
Registriert seit: 20.10.2016
MyBB-Version: 1.8.xx
#5
19.04.2020, 14:29 (Dieser Beitrag wurde zuletzt bearbeitet: 19.04.2020, 15:14 von lenox.)
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.
mfg
lenox
https://angel-juenger.de
Suchen
Zitieren
Jockl Offline
Administrator
*******
Administratoren
Beiträge: 9.560
Themen: 197
Registriert seit: 27.12.2007
MyBB-Version: 1.8
#6
19.04.2020, 15:33
(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
viele Grüße
Jockl
übersetzte und eigene Plugins
Homepage Suchen
Zitieren
lenox Offline
Erfahrener
****
Beiträge: 714
Themen: 58
Registriert seit: 20.10.2016
MyBB-Version: 1.8.xx
#7
19.04.2020, 16:28
(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
mfg
lenox
https://angel-juenger.de
Suchen
Zitieren
Schnapsnase Offline
Nec scire fas est omnia
*****
Beiträge: 2.239
Themen: 33
Registriert seit: 25.05.2018
MyBB-Version: 1.8.38
#8
19.04.2020, 16:31 (Dieser Beitrag wurde zuletzt bearbeitet: 19.04.2020, 16:31 von Schnapsnase.)
(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.
Homepage Suchen
Zitieren
lenox Offline
Erfahrener
****
Beiträge: 714
Themen: 58
Registriert seit: 20.10.2016
MyBB-Version: 1.8.xx
#9
19.04.2020, 16:59
(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
mfg
lenox
https://angel-juenger.de
Suchen
Zitieren
Schnapsnase Offline
Nec scire fas est omnia
*****
Beiträge: 2.239
Themen: 33
Registriert seit: 25.05.2018
MyBB-Version: 1.8.38
#10
19.04.2020, 17:07
(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
Homepage Suchen
Zitieren


Möglicherweise verwandte Themen…
Thema Verfasser Antworten Ansichten Letzter Beitrag
  Animation in das Weiterleitungsfenster einbauen Crasher 1 1.735 10.01.2007, 20:55
Letzter Beitrag: Michael
  Loading-Animation hier aus dem Forum fabs 3 2.174 29.05.2006, 20:49
Letzter Beitrag: fabs



Foren-Team | Kontakt | MyBB.de | Nach oben | Archiv-Modus | Alle Foren als gelesen markieren | RSS-Synchronisation | Zur mobilen Ansicht