+- 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> 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> 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 - 18.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, 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>Code:
.animated-button input {
background: transparent;
border: none;
}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, 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?
RE: Button animation - lenox - 19.04.2020
(19.04.2020, 15:33)Jockl schrieb:Danke für den Tipp(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?
RE: Button animation - Schnapsnase - 19.04.2020
(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>RE: Button animation - lenox - 19.04.2020
(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:
Danach in der css den div-container anpassen.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>
Danke dir läuft nun alles
RE: Button animation - Schnapsnase - 19.04.2020
(19.04.2020, 16:59)lenox schrieb: Danke dir läuft nun alles
Gerne!
Das geht sicher auch anders, aber Deine Animation war ja per copy&paste nun schon mal vorgegeben.
