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.)

Seite 1 von 2 « Seite 1 2 Seite »

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. Elektronik & Elektrotechnik Elektronik & Elektrotechnik - Fragen und Antworten Elektronik & Elektrotechnik - Praxis - Highlights 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 (zuletzt bearbeitet: 08.11.2024 07:48)

bienchen

Informationen anzeigen

Beiträge:	88
Registriert seit:	20.06.2020

Homepage:	Nicht angegeben
Letzte Spende	Betrag € Forum Spende
Sternzeichen	Wassermann
Likes	52

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=" ... "></span>   
 <span class="title">Button 1</span></li>  
<li><img src=" ... "></span>   
<span class="title">Button 2</span></li>
<li><img src=" ... "></span>   
 <span class="title">Button 3</span></li>
<li> <img src=" ... "></span>    
<span class="title">Button 4</span></li>  
<li> <img src=" ... "></span>   
<span class="title">Button 5</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: 19.11.2024 09:22)

Wolfgang

Administrator

Informationen anzeigen

Beiträge:	3865
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag € Forum Spende
Sternzeichen	Skorpion
Likes	1707

Hilfe bei animierten Button (li, ul, etc.) - Version 1
Aktualisiert 19.11.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/b2001010/a_800_4ec558a8.png"><div class="button-title1">Forum</div></div>
<div class="button-link1"><img src="https://files.homepagemodules.de/b2001010/a_951_618f3c8a.png"><div class="button-title1">Mitgliederliste</div></div>
<div class="button-link1"><img src="https://files.homepagemodules.de/b2001010/a_893_6f4bb894.png"><div class="button-title1">Präsentation</div></div>
<div class="button-link1"><img src="https://files.homepagemodules.de/b214495/a_560_5a77b5dc.png"><div class="button-title1">Letzte Beiträge</div></div>
<div class="button-link1"><img src="https://files.homepagemodules.de/b2001010/a_648.png"><div class="button-title1">Wer ist online?</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 und Icons 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: 19.11.2024 09:15)

Wolfgang

Administrator

Informationen anzeigen

Beiträge:	3865
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag € Forum Spende
Sternzeichen	Skorpion
Likes	1707

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/b2001010/a_800_4ec558a8.png"><div class="button-title2">Forum</div></div>
<div class="button-link2"><img src="https://files.homepagemodules.de/b2001010/a_951_618f3c8a.png"><div class="button-title2">Mitgliederliste</div></div>
<div class="button-link2"><img src="https://files.homepagemodules.de/b2001010/a_893_6f4bb894.png"><div class="button-title2">Präsentation</div></div>
<div class="button-link2"><img src="https://files.homepagemodules.de/b214495/a_560_5a77b5dc.png"><div class="button-title2">Letzte Beiträge</div></div>
<div class="button-link2"><img src="https://files.homepagemodules.de/b2001010/a_648.png"><div class="button-title2">Wer ist online?</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 und Icons 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:	3865
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag € Forum Spende
Sternzeichen	Skorpion
Likes	1707

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: 19.11.2024 09:07)

Wolfgang

Administrator

Informationen anzeigen

Beiträge:	3865
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag € Forum Spende
Sternzeichen	Skorpion
Likes	1707

Hilfe bei animierten Button (li, ul, etc.) - Neuer Effekt - Version 3
Aktualisiert 19.11.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/b2001010/a_800_4ec558a8.png"><div class="button-title3">Forum</div></div>
<div class="button-link3"><img src="https://files.homepagemodules.de/b2001010/a_951_618f3c8a.png"><div class="button-title3">Mitgliederliste</div></div>
<div class="button-link3"><img src="https://files.homepagemodules.de/b2001010/a_893_6f4bb894.png"><div class="button-title3">Präsentation</div></div>
<div class="button-link3"><img src="https://files.homepagemodules.de/b214495/a_560_5a77b5dc.png"><div class="button-title3">Letzte Beiträge</div></div>
<div class="button-link3"><img src="https://files.homepagemodules.de/b2001010/a_648.png"><div class="button-title3">Wer ist online?</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 und Icons 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:	3865
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag € Forum Spende
Sternzeichen	Skorpion
Likes	1707

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!

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!

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

Forum der Transportunternehmer » « Forum Ansicht -Hintegrund

Seite 1 von 2 « Seite 1 2 Seite »

Ähnliche Themen

Antworten

Letzter Beitrag

Kurze Videoclips als MP4-Dateien & animierte GIF's per Mouseover - Neue Video-Button!
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Dankeschön

28.10.2025 12:02
von

Dankeschön • Zugriffe: 2500

Animierte Grüße unter der Navigation - Animiertes Plakat
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

26.06.2025 05:25
von

Wolfgang • Zugriffe: 533

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: 891

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: 511

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: 539
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: 1167

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

14.10.2025 18:28
von

Wolfgang • Zugriffe: 2975

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: 1529
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: 3490

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.)

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 €

41%