Hilfe bei animierten Button (li, ul, etc.)

Um alle Funktionen nutzen zu k�nnen, aktivieren Sie bitte JavaScript in ihrem Browser!

Der Treffpunkt f�r Hilfe, Tricks & Tipps � XOBOR-Foren und Homepages � Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten � Hilfe bei animierten Button (li, ul, etc.)

Themen-Einstellungen

Thema drucken

Bereich wechseln

Start Willkommen! Ank�ndigungen & Termine, wichtige News! Stellen Sie Ihr eigene Webseite vor! Betriebssystem MS Windows & andere Betriebssysteme Betriebssystem MS Windows 11, 10, 8 und 7 - Tricks & Tipps MS Windows 11, 10, 8 und 7 - Fragen & Antworten Linux, Ubuntu und andere Betriebssysteme �rger mit dem PC, Laptop oder Tablet? �rger mit dem PC, Laptop oder Tablet - Vorbeugung und Hilfe �rger mit dem PC, Laptop oder Tablet - Fragen & Antworten Fragen zu DSL, VDSL, LTE und anderen Netzempfangsarten XOBOR-Foren und Homepages Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten Das neue Template Xobor (v6) Energieerzeugung im neuen Zeitalter - Revolution�r! Videos und Webseiten zur Freien Energie Wasserstoff - Energietr�ger der Zukunft. Die besten Links Empfehlenswerte und interessante Links! Link - Suche Verschiedenes Faszinationen & Unglaubliches! Tricks & Tipps f�r Smartphones und iPhones Lob, Kritik & Verbesserungsvorschl�ge Spiel & Spa�, Witz & gute Laune! Spiritualit�t, Seele, New Age, Yoga, Gesundheit Alles, was noch so �brig bleibt Bannertausch Wie funktioniert der Bannertausch? Bannerrotation und Bannerwechsel

#1 | Hilfe bei animierten Button (li, ul, etc.) datum

09.09.2024 11:16

bienchen

Informationen anzeigen

Beitr�ge:	82
Registriert seit:	20.06.2020

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Wassermann
Likes	46

Hallo zusammen,

ich hab ein kleines Problem mit einem Button Hover. Also der Button an sich funktioniert, jedoch übernimmt der Code auch die Navigation.
Keine Ahnung ob ich einfach zu kompliziert denke, aber ich hab auch schon versucht mit class zu arbeiten, jedoch will er dann das li und ul nicht mehr übernehmen.

Kann mir jemand helfen?

1
2
3
4
5
6
7
8
9
10
 
<span style="buttonlinks"><ul><li><img src="//files.homepagemodules.de/b920994/a_511_439b0e8c.png"></span>   
 <span class="title">Rulebook</span></li>  
<li><img src="//files.homepagemodules.de/b920994/a_512_bfa12dc2.png"></span>   
<span class="title">The Texians</span></li>
<li><img src="//files.homepagemodules.de/b920994/a_513_84182e58.png"></span>   
 <span class="title">Presentation</span></li>
<li> <img src="//files.homepagemodules.de/b920994/a_514_b979da12.png"></span>    
<span class="title">Wanteds</span></li>  
<li> <img src="//files.homepagemodules.de/b920994/a_515_1feb13cd.png"></span>   
<span class="title">Application</span></li></ul></span>
 

Schließen

Spoiler mit einem Klick öffnen und schließen!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
 
.buttonslinks {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
} 
 
ul {
  display: flex;
  position: relative;
  margin-right: -15px;
}
 
ul li {
  position: relative;
  list-style: none;
  width: 28px;
  height: 28px;
  background: linear-gradient(45deg, #ede9e1, #fff);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.5s;
}
 
ul li::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: linear-gradient(45deg, #ede9e1, #fff);
  opacity: 0;
  transition: 0.5s;
}
 
ul li::after {
  content: "";
  position: absolute;
  top: 10px;
  width: 100px;
  height: 100%;
  border-radius: 8px;
  background: linear-gradient(45deg, var(--i), var(--j));
  transition: 0.5s;
  filter: blur(15px);
  z-index: -1;
  opacity: 0;
}
 
ul li:hover {
  width: 100px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0);
}
 
ul li:hover::before {
  opacity: 1;
}
 
ul li:hover::after {
  opacity: 0.5;
}
 
ul li img {
  color: #777;
  font-size: 14px;
 margin-top: 5px; 
margin-left: 6px; 
  transition: 0.5s;
  transition-delay: 0.25s;
}
 
ul li:hover ion-icon {
  transform: scale(0);
  color: #000;
  transition-delay: 0s;
}
 
ul li span {
  position: absolute;
}
 
ul li .title {
  color: #000;
width: 100px;
  font-size: 9px;
margin-top: -16px;
text-align: center;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transform: scale(0);
  transition: 0.5s;
  transition-delay: 0s;
}
 
ul li:hover .title {
  transform: scale(1);
  transition-delay: 0.25s;
}
 

Schließen

Spoiler mit einem Klick öffnen und schließen!

Also mir ist bewusst, dass er das aufgrund der li und ul auf die anderen Elemente im Forum anwendet, aber wie übergehe ich das vernünftig?
Und wie kann ich die Buttons in ein Center setzen, ohne, dass es alles verhaut?

Ich hoffe mir kann hier jemand helfen.

Wolfgang findet das Top!

Antworten

#2 | Re: Hilfe bei animierten Button (li, ul, etc.) - Version 1 datum

09.09.2024 21:21 (zuletzt bearbeitet: 15.09.2024 18:25)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3420
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1301

Hilfe bei animierten Button (li, ul, etc.) - Version 1
Aktualisiert 14.9.2024

Hallo BienchenIn Deinem Code haben sich ein Fehler eingeschlichen!
Die "span-Container" sind nicht richtig aufgebaut, bzw. abgeschlossen!
Mit den Tags "<ul> und <li>" ist das so eine Sache, entweder stören die Einstellungen des Forum oder die neuen Einstellungen stören das Forum selbst!

Was hältst Du davon "<ul> und<li>" einfach zu ersetzen?
Wenn "display: flex oder display:inline-block;" Verwendung findet, ist das gut machbar!

Habe so einiges ausprobiertHabe die Tags "<ul>, <li> und <span>" durch "Div-Container" ersetzt und erweiterte Classes verwendet!
Zusätzlich die CSS etwas minimiert!
Neu! Buttonreihe kann auch zentriert dargestellt werden!
Beim Mouseover wird der Text oberhalb der Grafik platziert. Die Grafik mit Text schiebt die Buttons auseinander!
Ich hoffe, dass es so passt!

Schöner Hover-Effekt!

1
2
3
4
5
6
7
 
<div class="button-selection1">
<div class="button-link1"><img src="https://files.homepagemodules.de/b920994/a_511_439b0e8c.png"><div class="button-title1">Rulebook</div></div>  
<div class="button-link1"><img src="https://files.homepagemodules.de/b920994/a_512_bfa12dc2.png"><div class="button-title1">The Texians</div></div>
<div class="button-link1"><img src="https://files.homepagemodules.de/b920994/a_513_84182e58.png"><div class="button-title1">Presentation</div></div>
<div class="button-link1"><img src="https://files.homepagemodules.de/b920994/a_514_b979da12.png"><div class="button-title1">Wanteds</div></div>  
<div class="button-link1"><img src="https://files.homepagemodules.de/b920994/a_515_1feb13cd.png"><div class="button-title1">Application</div></div>
</div>
 

Schließen

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
 
.button-selection1 {
  display: -webkit-inline-flex;
  display: inline-flex;
 
  /* Buttonreihe wird zentriert */
  /* justify-content: center; */
}
 
.button-link1 {
  display: -webkit-inline-flex;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 28px;
  height: 28px;
  background: linear-gradient(45deg, #ede9e1, #fff);
  border-radius: 8px;
  cursor: pointer;
  margin: -5px 2px 5px 2px !important;
  transition: 0.5s;
}
 
.button-link1:hover {
  width:100px;
  padding-top:15px;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
  margin: -10px 2px 5px 2px !important;
}
 
.button-link1 img {
  transition: 0.5s;
  transition-delay: 0.25s;
}
 
.button-title1 {
  position: absolute !important;
  color: #000;
  white-space: pre-line;
  font-size: 9px;
  font-weight: bold;
  margin-top: -35px !important;
  text-align: center;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transform: scale(0);
  transition: 0.5s;
  transition-delay: 0s;
}
 
.button-link1:hover .button-title1 {
  transform: scale(1);
  transition-delay: 0.25s;
}
 

Schließen

Spoiler mit einem Klick öffnen und schließen!

Bis dann und viel Erfolg!
Wolfgang

Antworten

Moderations-Kommentar:

CSS aktualisiert!
Buttonreihe kann optional auch zentriert dargestellt werden!

#3 | RE: Hilfe bei animierten Button (li, ul, etc.) datum

09.09.2024 21:36

Hallo Wolfgang, danke für die schnelle Hilfe!
ich finde es so schon ganz gut und ich hatte es eigentlich so auch probiert.. vermutlich hatte ich mich da einfach zu sehr zerdacht.
Weißt du wie man es hinbekommt, dass das icon verschwindet? Also nur der Text dann zu sehen ist?

Dann wäre es wirklich perfekt! <3

LG

Wolfgang findet das Top!

Antworten

#4 | RE: Hilfe bei animierten Button (li, ul, etc.) - Version 2 datum

10.09.2024 07:18 (zuletzt bearbeitet: 15.09.2024 19:05)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3420
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1301

Hilfe bei animierten Button (li, ul, etc.) - Version 2
Aktualisiert 14.09.2024

Hallo BienchenDie Grafik im Button beim Mouseover gegen einen Titel auszutauschen geht auch recht gut!
Man braucht nur die Grafik beim Mouseover auszublenden. Habe es hier mit dem TAG "opacity:0" gelöst.
Beim Mouseover wird die Grafik durch den Text ausgetauscht. Der Text schiebt die Button auseinander!
Neu! Buttonreihe kann auch zentriert dargestellt werden!

Nach wie vor ein schöner Hover-Effekt!

1
2
3
4
5
6
7
 
<div class="button-selection2">
<div class="button-link2"><img src="https://files.homepagemodules.de/b920994/a_511_439b0e8c.png"><div class="button-title2">Rulebook</div></div>  
<div class="button-link2"><img src="https://files.homepagemodules.de/b920994/a_512_bfa12dc2.png"><div class="button-title2">The Texians</div></div>
<div class="button-link2"><img src="https://files.homepagemodules.de/b920994/a_513_84182e58.png"><div class="button-title2">Presentation</div></div>
<div class="button-link2"><img src="https://files.homepagemodules.de/b920994/a_514_b979da12.png"><div class="button-title2">Wanteds</div></div>  
<div class="button-link2"><img src="https://files.homepagemodules.de/b920994/a_515_1feb13cd.png"><div class="button-title2">Application</div></div>
</div>
 

Schließen

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
 
.button-selection2 {
  display: flex;
 
  /* Buttonreihe wird zentriert */
  /* justify-content: center; */
}
 
.button-link2 {
  display: flex; 
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  background: linear-gradient(45deg, #ede9e1, #fff);
  border-radius: 8px;
  cursor: pointer;
  margin: -5px 2px 5px 2px !important;
  transition: 0.5s;
}
 
.button-link2:hover {
  width: 120px;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
}
 
.button-link2:hover img {
  opacity:0;
}
 
.button-link2 img {
  transition: 0.5s;
  transition-delay: 0.25s;
}
 
.button-title2 {
  position: absolute !important;
  display: flex; 
  justify-content: center;
  align-items: center;
  transform: scale(0);
  transition: 0.5s;
  transition-delay: 0s;
}
 
.button-title2, .button-title2 a {
  hyphens: auto;
  font-size: 9px !important;
  color: #000000;
  font-size: 9px !important;
  font-weight: bold;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
 
.button-link2:hover .button-title2 {
  transform: scale(1);
  transition-delay: 0.25s;
}
 

Schließen

Spoiler mit einem Klick öffnen und schließen!

Bis dann und viel Erfolg!
Wolfgang

Antworten

Moderations-Kommentar:

CSS aktualisiert!
Buttonreihe kann optional auch zentriert dargestellt werden!

#5 | Fehlersuche: Hilfe bei animierten Button (li, ul, etc.) datum

10.09.2024 08:41 (zuletzt bearbeitet: 11.09.2024 14:32)

Guten Morgen,
okay, sehr cool! Ich habs mal ausprobiert, aber irgendwie ist nun beim abspeichern alles verschoben und ich kann die Buttons nicht in die Mitte setzen.

In der Vorschau hingegen ist es nicht verschoben.
Entschuldige die viele Arbeit

Wolfgang findet das Top!

Antworten

#6 | Fehlersuche: Hilfe bei animierten Button (li, ul, etc.) datum

11.09.2024 14:31 (zuletzt bearbeitet: 12.09.2024 16:48)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3420
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1301

Fehlersuche: Hilfe bei animierten Button (li, ul, etc.)

Hallo BienchenHabe die Ursache gefunden!
Wie vermutet, hatten Einstellungen aus dem Forum die Verschiebung verursacht!

Fehlersuche

In Deinem Fall lag es an dem folgenden Eintrag!
Die Class ".messagecont" im Gaia-Template hat Einfluss auf alle Beiträge!
Das folgende "Div" beeinflusst alle "Div's" in den Beiträgen und somit auch den Div-Container der neuen Button!
Hier wurde die Class ".button-title " überschrieben und verursachte die Verschiebung!

1
2
3
 
.messagecont div {
  position: relative;
}
 

Lösung

Die Lösung war, der Class ".button-title" mit "position: absolute" ein "!important" zu spendieren!
Habe alles im Beiträgen #2 und Beitrag #4 nachgetragen!

1
2
3
 
.button-title {
  position: absolute !important;
}
 

Bis dann und besten Dank fürs Feedback
Wolfgang

Antworten

#7 | Hilfe bei animierten Button (li, ul, etc.) - Neuer Effekt - Version 3 datum

12.09.2024 16:42 (zuletzt bearbeitet: 15.09.2024 18:24)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3420
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1301

Hilfe bei animierten Button (li, ul, etc.) - Neuer Effekt - Version 3
Aktualisiert 15.09.2024

Hallo BienchenBeim Ausprobieren und beim Testen ist eine weitere Version der animierten Buttonreihe entstanden!
Aber, wie alles Geschmackssache....

Was kann die neue Buttonreihe

In der Version 2 macht sich der Text beim Mouseover Platz, die Buttonreihe wird auseinandergeschoben. Nicht immer vorteilhaft!
In der neuen Version 3 wird die Buttonreihe nicht auseinandergeschoben, sondern das Textfeld legt sich über die Buttonreihe (siehe Bild).
Die Button können beliebig erweitert werden!

1
2
3
4
5
6
7
 
<div class="button-selection3">
<div class="button-link3"><img src="https://files.homepagemodules.de/b920994/a_511_439b0e8c.png"><div class="button-title3">Rulebook</div></div>  
<div class="button-link3"><img src="https://files.homepagemodules.de/b920994/a_512_bfa12dc2.png"><div class="button-title3">The Texians</div></div>
<div class="button-link3"><img src="https://files.homepagemodules.de/b920994/a_513_84182e58.png"><div class="button-title3">Presentation</div></div>
<div class="button-link3"><img src="https://files.homepagemodules.de/b920994/a_514_b979da12.png"><div class="button-title3">Wanteds</div></div>  
<div class="button-link3"><img src="https://files.homepagemodules.de/b920994/a_515_1feb13cd.png"><div class="button-title3">Application</div></div>
</div>
 

Schließen

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
 
.button-selection3 {
  display: -webkit-inline-flex;
  display: inline-flex;
}
 
.button-link3 {
  display: -webkit-inline-flex;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  background: linear-gradient(45deg, #ede9e1, #fff);
  border-radius: 8px;
  cursor: pointer;
  margin: -5px 2px 5px 2px !important;
  transition: 0.5s;
}
 
.button-link3:hover img {
  opacity:0;
}
 
.button-link3 img {
  height: 20px;
  transition: 0.5s;
  transition-delay: 0.25s;
  z-index: 99998;
}
 
.button-title3 {
  background: linear-gradient(45deg, #ede9e1, #fff);
  white-space: nowrap;
  padding: 5px 10px !important;
  border-radius: 8px;
  position: absolute !important;
  color: #000000;
  font-size: 9px;
  font-weight: bold;
  text-align: center;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border:1px solid #aaaaaa;
  z-index: 99999;
  transform: scale(0);
  transition: 0.5s;
  transition-delay: 0s;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
}
 
.button-link3:hover .button-title3 { 
  transform: scale(1);
  transition-delay: 0.25s;
}
 

Schließen

Spoiler mit einem Klick öffnen und schließen!

Bis dann und viel Erfolg!
Wolfgang

bienchen und Anne finden das Top!

Antworten

Moderations-Kommentar:

CSS nochmals angepasst!

#8 | Wo und wie baut man die animierte Buttonreihe ein - Version 1-3? datum

14.09.2024 11:31 (zuletzt bearbeitet: 15.09.2024 23:12)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3420
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1301

Wo und wie baut man die animierte Buttonreihe ein - Version 1-3?
Aktualisiert 15.09.2024

Wo und wie baut man die animierte Buttonreihe ein?

Die Buttonreihe kann als HTML-Code mit einer Verlinkung auf jeder Seite im Forum untergebracht werden.
Die Platzierung kann über ein Plugin in einem bestimmtes Template-Element festgelegt werden!
Wenn die einzelnen Button verlinkt werden kann die Buttonreihe als Auswahl-Menü arbeiten!
Es besteht auch die Möglichkeit die Buttonreihe in der Iconbar unterzubringen!
Hier könnte man sie als Auswahl zum Einfügen von Foren-Codes benutzen!

Buttonreihe mit Verlinkungen

Die CSS bleibt soweit bestehen, kann natürlich auch für die Links erweitert werden!
Die Titel im letzten DIV-Container brauchen, wie im Beispiel der Version 2, nur mit Links versehen werden!
Die Grafiken und der beschreibende Text müssen noch angepasst werden!
Die Platzierung kann über ein Plugin und ein bestimmtes Template-Element festgelegt oder zum Testen in die "Kopf- oder Fußleiste" eingetragen werden!
Es ist möglich alle 3 Versionen einzusetzen!

Ruhezustand

Mouseover "Kalender"

Forum Übersicht

Das komplette Skript kann zur Positionierung als Plugin in z.B.: "index_header" - Forum Übersicht Header kopiert werden!
Die verlinkten Button erscheinen dann bei der "Foren Übersicht" über dem "Activity Feed"!
Die Verlinkungen können dann zu beliebigen Punkten im Forum führen!
Es ist darauf zu achten, dass die Beschreibungen nicht zu lang werden, da sie sonst über den Rahmen hinausragen können!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
 
<style>
.button-selection2 {
  display: flex;
 
  /* Buttonreihe wird zentriert */
  /* justify-content: center; */
}
 
.button-link2 {
  display: flex; 
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  background: linear-gradient(45deg, #ede9e1, #fff);
  border-radius: 8px;
  cursor: pointer;
  margin: -5px 2px 5px 2px !important;
  transition: 0.5s;
}
 
.button-link2:hover {
  width: 120px;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
}
 
.button-link2:hover img {
  opacity:0;
}
 
.button-link2 img {
  transition: 0.5s;
  transition-delay: 0.25s;
}
 
.button-title2 {
  position: absolute !important;
  display: flex; 
  justify-content: center;
  align-items: center;
  transform: scale(0);
  transition: 0.5s;
  transition-delay: 0s;
}
 
.button-title2, .button-title2 a {
  hyphens: auto;
  font-size: 9px !important;
  color: #000000;
  font-size: 9px !important;
  font-weight: bold;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
 
.button-link2:hover .button-title2 {
  transform: scale(1);
  transition-delay: 0.25s;
}
</style>
 
<div class="button-selection2">
<div class="button-link2"><img src="https://files.homepagemodules.de/b2001010/a_800_4ec558a8.png"><div class="button-title2"><a href="https://www.hilfe-tricks-tipps.de/">Forum</a></div></div>
<div class="button-link2"><img src="https://files.homepagemodules.de/b2001010/a_951_618f3c8a.png"><div class="button-title2"><a href="https://www.hilfe-tricks-tipps.de/userlist.php">Mitgliederliste</a></div></div>
<div class="button-link2"><img src="https://files.homepagemodules.de/b2001010/a_893_6f4bb894.png"><div class="button-title2"><a href="https://www.hilfe-tricks-tipps.de/page-104774-43.html">Präsentation</a></div></div>
<div class="button-link2"><img src="https://files.homepagemodules.de/b214495/a_560_5a77b5dc.png"><div class="button-title2"><a href="https://www.hilfe-tricks-tipps.de/forum.php?show=last">Letzte Beiträge</a></div></div>
<div class="button-link2"><img src="https://files.homepagemodules.de/b2001010/a_648.png"><div class="button-title2"><a href="https://www.hilfe-tricks-tipps.de/useronline.php">Wer ist online?</a></div></div> 
</div>
 

Schließen

Buttonreihe in der Iconbar

Auch hier bleibt die CSS soweit bestehen, kann natürlich auch erweitert werden!
Will man Foren-Codes einfügen, wird der Titel im letzten DIV-Container, wie im Beispiel der Version 3, mit einem "onclick-Befehl" versehen!
Der HTML-Code wird in der Iconbar unter "HTML" mit beliebigen Namen angelegt!
Auf der rechten Seite unter "Neue Icons hinzufügen" wird das Mauswahl-Menü an die richtige Stelle geschoben!
Es ist möglich alle 3 Versionen einzusetzen!

Ruhezustand

Mouseover "Center"

In der Iconbar

Zur Installation Iconbar aufrufen!
Buttonreihe unter "HTML" anlegen.
Namen vergeben z.B. "Buttonreihe".
Unter "HTML:" Den folgenden Code eintragen.
Speichern nicht vergessen!
Buttonreihe im Menü links an die richtige Stelle schieben!
Unter "Weitere Einstellungen" können die Berechtigungen vergeben werden!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
 
<style>
.button-selection3 {
  display: -webkit-inline-flex;
  display: inline-flex;
}
 
.button-link3 {
  display: -webkit-inline-flex;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  background: linear-gradient(45deg, #ede9e1, #fff);
  border-radius: 8px;
  cursor: pointer;
  margin: -5px 2px 5px 2px !important;
  transition: 0.5s;
}
 
.button-link3:hover img {
  opacity:0;
}
 
.button-link3 img {
  height: 20px;
  transition: 0.5s;
  transition-delay: 0.25s;
  z-index: 99998;
}
 
.button-title3 {
  background: linear-gradient(45deg, #ede9e1, #fff);
  white-space: nowrap;
  padding: 5px 10px !important;
  border-radius: 8px;
  position: absolute !important;
  color: #000000;
  font-size: 9px;
  font-weight: bold;
  text-align: center;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border:1px solid #aaaaaa;
  z-index: 99999;
  transform: scale(0);
  transition: 0.5s;
  transition-delay: 0s;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
}
 
.button-link3:hover .button-title3 { 
  transform: scale(1);
  transition-delay: 0.25s;
}
</style>
 
<div class="button-selection3">
<div class="button-link3"><img class="xob_icon" src="https://img.homepagemodules.de/ds/static/gaia/bold.png"><div class="button-title3" onclick="xob_insert('[b]','[/b]')" class="xob_icon_cont">Schrift dicker</div></div>  
<div class="button-link3"><img class="xob_icon" src="https://img.homepagemodules.de/ds/static/gaia/italic.png"><div class="button-title3" onclick="xob_insert('[i]','[/i]')" class="xob_icon_cont">Schrift kursiv</div></div>
<div class="button-link3"><img class="xob_icon" src="https://img.homepagemodules.de/ds/static/gaia/underline.png"><div class="button-title3" onclick="xob_insert('[u]','[/u]')" class="xob_icon_cont">Schrift unterstrichen</div></div>
<div class="button-link3"><img class="xob_icon" src="https://files.homepagemodules.de/b104774/a_26_e839435e.png"><div class="button-title3" onclick="xob_insert('[center]','[/center]')" class="xob_icon_cont">Schrift zentriert</div></div>  
<div class="button-link3"><img class="xob_icon" src="https://files.homepagemodules.de/b104774/a_160_0f96239a.png"><div class="button-title3" onclick="xob_insert('[left]','[/left]')" class="xob_icon_cont">Schrift links</div></div>
</div>
 

Schließen

CSS + DIV's überarbeitetDie CSS und DIV-Container in alles 3 Versionen wurden nochmals überarbeitet, die Classes umbenannt!

Bis dann
Wolfgang

Antworten

Moderations-Kommentar:

Alles genauer beschrieben und Installationsanweisung hinzugefügt!

#9 | RE: Wo und wie kann man die animierte Buttonreihe einbauen - Version 1-3? datum

15.09.2024 12:53

Ich brauche

Aktuell verstehe ich "Bahnhof"...
Könnt ihr mir mal bitte bildlich zeigen wie das aussieht?!

Sorry für meine amateurhafte Frage.

LG vom Arndt

Themen bei der Community für Transportunternehmer und Führungskräfte der Transport- und Logistikbranche:

Wolfgang findet das Top!

Antworten

#10 | Fragen: Wo und wie kann man die animierte Buttonreihe einbauen - Version 1-3? datum

15.09.2024 23:05 (zuletzt bearbeitet: 15.09.2024 23:07)

Fragen: Wo und wie kann man die animierte Buttonreihe einbauen - Version 1-3?

Hallo ArndtWollte anfänglich in Beitrag #8 nur einige Möglichkeiten aufzeigen, die mit der Buttonreihe machbar sind!
Da sind die Beschreibungen und Installationsanweisungen etwas zu kurz gekommen!
Habe alles nachgeholt und hoffe, dass es verständlicher geworden ist!
Ich finde die drei Variationen nach wie vor klasse, sie lassen viele Möglichkeiten zu weiteren Ideen offen!

Ich hoffe, dass ich Deine Frage getroffen habe und etwas weiterhelfen konnte!
Und besten Dank an @bienchen !
VG
Wolfgang

bienchen und Anne finden das Top!

Antworten

Meine Idee und Inspiration (Daishi) - Audiodateien abspielen � � Einbau von JavaScript

�hnliche Themen

Antworten

Letzter Beitrag

Mein Projekt Teilen Button
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten von Daishi 11 28.03.2024 21:18
Daishi • Zugriffe: 535

Projekt Teilen Button - location.href url automatisch erkennen
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten von Daishi

11.02.2024 11:38
von

Daishi • Zugriffe: 326

Animierte Titelleisten: Details + Zusammenfassung
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Daishi 1 13.01.2023 14:58
Daishi • Zugriffe: 367
Drucker-Button in der Bildergalerie!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang 0 01.01.2020 11:02
Wolfgang • Zugriffe: 861

Signatur wahlweise ausblenden - Mit Check-Button!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

21.05.2024 10:34
von

Wolfgang • Zugriffe: 2194

"Fehler gefunden! - Button" einbauen!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang 8 18.09.2016 16:23
Scannerxy • Zugriffe: 1851

Xobor-Spenden-Button - In der Foren Übersicht, im Profil, im Beitrag, im Portal und in der Mitgliederliste!
Erstellt im Forum Das neue Template Xobor (v6) von Wolfgang

18.08.2023 16:54
von

Wolfgang • Zugriffe: 24593

Tolles Bildbearbeitungsprogramm, mit dem man animierte Gifs bearbeiten kann!
Erstellt im Forum Empfehlenswerte und interessante Links! von Hans58 0 18.04.2013 17:50
Hans58 • Zugriffe: 1308
Animierte Browser-Titelleiste mit Laufschrift
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang 4 05.05.2020 20:38
Wolfgang • Zugriffe: 3209

Foren Spende

Hallo !

Wir hoffen, dass Dir unser Forum gef�llt und Du Dich hier genauso wohlf�hlst wie wir.

Um Dir und den anderen Mitgliedern das Bestm�gliche bieten zu k�nnen, w�rden wir das Forum gern werbefrei gestalten, mit tollen neuen Extras erg�nzen.

Wenn Du uns dabei unterst�tzen m�chtest, kannst Du mit Hilfe einer kleinen Spende dazu beitragen.

Deine Spende hilft!

Spendenziel: 45 €

17%

Zum Einbau: Google-Translator!

Favoriten speichern

Forum - Hilfe bei animierten Button (li, ul, etc.)

Hilfe bei animierten Button (li, ul, etc.) - Version 1
Aktualisiert 14.9.2024

Hilfe bei animierten Button (li, ul, etc.) - Version 2
Aktualisiert 14.09.2024

Fehlersuche: Hilfe bei animierten Button (li, ul, etc.)

Hilfe bei animierten Button (li, ul, etc.) - Neuer Effekt - Version 3
Aktualisiert 15.09.2024

Wo und wie baut man die animierte Buttonreihe ein - Version 1-3?
Aktualisiert 15.09.2024

Fragen: Wo und wie kann man die animierte Buttonreihe einbauen - Version 1-3?

Forum Lesezeichen ❌

Forum - Hilfe bei animierten Button (li, ul, etc.)

Hilfe bei animierten Button (li, ul, etc.) - Version 1Aktualisiert 14.9.2024

Hilfe bei animierten Button (li, ul, etc.) - Version 2Aktualisiert 14.09.2024

Fehlersuche: Hilfe bei animierten Button (li, ul, etc.)

Hilfe bei animierten Button (li, ul, etc.) - Neuer Effekt - Version 3Aktualisiert 15.09.2024

Wo und wie baut man die animierte Buttonreihe ein - Version 1-3?Aktualisiert 15.09.2024

Fragen: Wo und wie kann man die animierte Buttonreihe einbauen - Version 1-3?

Forum Lesezeichen ❌

Hilfe bei animierten Button (li, ul, etc.) - Version 1
Aktualisiert 14.9.2024

Hilfe bei animierten Button (li, ul, etc.) - Version 2
Aktualisiert 14.09.2024

Hilfe bei animierten Button (li, ul, etc.) - Neuer Effekt - Version 3
Aktualisiert 15.09.2024

Wo und wie baut man die animierte Buttonreihe ein - Version 1-3?
Aktualisiert 15.09.2024