Jimdo-Elemente » HTML Element verlinken

19.08.2019 18:18 (zuletzt bearbeitet: 19.08.2019 19:40)

twoparts
#1

tw

Hallo,

Dies ist mein erster Beitrag und ich möchte alle hier recht herzlich grüßen!

Nachdem ich mir nun mit etwas HTML und CSS einen Button gebastelt habe, versuche ich diesen nun zu verlinken.
Ich bekomme es leider nicht hin.

Dies ist die Zeile Code, die ich in ein HTML Widget eingefügt habe:

1
 
<div class="wrap"><button class="button">ANFRAGE</button></div>

Und hier der entsprechende CSS Code:

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
 
<style type="text/css">
/*<![CDATA[*/
 
.wrap {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
 
.button {
  width: 140px;
  height: 45px;
  font-family: 'Roboto', sans-serif;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 2.0px;
  font-weight: 500;
  color: black;
  background-color: orange;
  border: none;
  border-radius: 45px;
  transition: all 0.3s ease 0s;
  cursor: pointer;
  outline: none;
  }
 
.button:hover {
  background-color: gray;
  transform: translateY(-7px);
}
 
/*]]>*/
</style>
 

Der Button funktioniert eigentlich recht gut, nur was nützt dieser, wenn nichts passiert ;-)
Ich bin immernoch Anfänger und batel mir viel aus Code-Schnipseln, Probieren und auch immer mehr über eigenes Wissen zusammen.
Sicher ist hier die Lösung recht einfach, nur komme ich leider nicht drauf.

Den HTML Code im Widget um

1
 
<a href="https.//www.xxx.xx"></a>

zu ergänzen funktioniert nicht.

Wielleicht ist jemand so nett und gibt mir einen kleinen Schubs.

Herzliche Grüße
Jürgen

Antworten

Beitrag melden

#2

20.08.2019 21:17 (zuletzt bearbeitet: 20.08.2019 21:35)

butterman007
#2

bu

butterman007

Hallo Jürgen

Du kannst einen Button ganz einfach einfügen und verlinken lassen. Du brauchst das nicht als Widget selbst zu coden. Wie immer auf "Inhalt hinzufügen", in der Auswahl auf "Button" klicken und dann entsprechend anpassen. Eine Anleitung, wie du Buttons ganz einfach einfügst und verlinkst, findest du ansonsten auch hier:

https://help.jimdo.com/hc/de/articles/115005504943-Wie-füge-ich-einen-Button-ein-

Falls du das aber immer noch selbst als Widget coden willst, würde ich folgendes ausprobieren:

1
2
3
4
 

<form method="get" action="http://deine-url.xxx" target="_blank">
<input type="submit" class="deine Klasse" value="Dein Text für den Button"> 
</form>
 

Anstatt "_blank" kannst du bei target auch "_self" einfügen. Dann geht die neue Seite im gleichen Browser-Tab auf. Das Aussehen kannst du in deinem Head per CSS anpassen...

Vielleicht hilft dir das weiter.

Gruss Butterman

Antworten

Beitrag melden

#3

22.08.2019 14:15 (zuletzt bearbeitet: 22.08.2019 14:18)

az_
#3

az_

Moin Jürgen,

...Dein Button funktioniert ganz hervorragend, wenn Du das html richtig schreibst:

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
 

<style type="text/css">
    /*<![CDATA[*/
 
    .wrap {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
 
    .button {
        width: auto;
        height: 45px;
        font-family: 'Roboto', sans-serif;
        font-size: 20px;
        text-transform: uppercase;
        letter-spacing: 2.0px;
        font-weight: 500;
        color: black;
        background-color: orange;
        border: none;
        border-radius: 45px;
        transition: all 0.3s ease 0s;
        cursor: pointer;
        outline: none;
    }
 
    .button:hover {
        background-color: gray;
        transform: translateY(-7px);
    }
 
    .button a {
        text-decoration: none;
        padding: 15px 20px;
    }
 
    /*]]>*/
 
</style>
 
<div class="wrap"><button class="button"><a href="https://example.com">Anfrage</a></button></div>
 

 

LG, az

Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!

...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de

Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html