Link als Button mit css darstellen?

Beispiel Bild - (html, Webseite, CSS)

5 Antworten

Hier habe ich dir mal ein einfaches Beispiel gebaut, wie das funktioniert:

https://jsfiddle.net/874g3v9j/

Sollte eigentlich alles selbsterklärend sein.

Gruß

Hi, danke dir! Wie würde das ganze den mit einem mousehover aussehen? Da soll sich nur die Hintergrundfarbe ändern und die Textfarbe.

0
@Allesnoob12

Wie meinst du das? Ich habe dir doch schon ein hover mit ins Beispiel eingebaut. Geh doch einfach mal mit der Maus über den Button und schau dir das CSS an.

1

Wie wärs mit einem DIV

also z.B:

<a href="link/"><div class="linkbox">Abmelden</div></a>

Dann kannst Du das div nach belieben stylen und es funktioniert als link

Webdesign: CSS Frage zu selbstlrierten Buttons in Stempelform

Hallo Leute, kreiere ne Webpage

Als Buttons möchte ich große selbstgezeichnete Stempel verwenden. Schwarzer Stempel auf gleichem Hintergrund wie der Header. (wie ein Stempel auf der Urkunde halt)

im HTML einen Div machen und Link zum Bild einfügen? Oder in CSS verlinken? Wo richtet man denn grundsätzlich man am einfachsten die Lage des DIVs aus: In HTML oder CSS?

Meine Idee ist: Die große Buttons soll als Fläche bestehen aus dem Begriff z.B. Impressum und einem Stempel neben oder drüber. Weil ich denke, der Begriff "Impressum" gut lesbar innerhalb des Stempels - da würde der Stempel zu groß...........

http://t1.ftcdn.net/jpg/00/39/60/52/400_F_39605218_hTiabjLm1D26QEh2gIaEOGDZU1BJfHzC.jpg

Ich will aber eine VEränderung entweder beim klicken oder hovern. Welche Varianten sind gutaussehend und leicht umzusetzen?

1) Erst nur die Schrift des Buttons, geht man mit der Maus drüber - kommt ein Stempel drüber oder daneben?

2) den Stempel beim Hovern oder klicken tiefer setzen, wie ein Schalter, der bei drücken unterhalb der Oberfläche gedrückt wird....... Bloß das zu erstellen traue ich mir kaum zu, Schlagschatten, Kanten, Schatten nach innen oder außen

Größer oder andere Farbe per hover oder klicken will ich eigentlich nicht - gefällt mir nicht!

ODer gern weitere Vorschläge, die mit meinen beschränkten Bildbearbeitungskenntnissen (und nur mit gimp - habe nicht mal PS) umsetzen kann. Vielen Dank!

...zur Frage

CSS tool welches den fertigen code ausgibt?

Hallo, gibts ne Website wo man sich ne Website aus bunnern und buttens unter Text Zusammensetzen kann....und dann auf ein button drückt.... Und der fertige CSS code rauskommt? Ich kenne openelement aber da sind die bunner hässlig..... LG

...zur Frage

Menü schließt sich nicht? Menü verschwindet nicht beim klicken?

Hallo liebe Gute Frage Gemeinde.

Ich sitze gerade an einem Menü für eine Webseite.

Wenn ich in die Handy-optimierte Version gehe bzw das Menü standardmäßig verkleinere, greift ganz normal die SR-Only Class von bootstrap.

Es funktioniert auch. Allerdings wenn ich dass erste mal klicke, öffnet sich das Menü und beim klicken auf einen Link bzw zu einer Seite, bleibt das Menü leider offen.

Wieso schließt sich das Menü nicht?

Woran liegt das?

https://www.hastebin.com/olatacekob.xml

Und dann habe ich noch eine zweite Frage!

Ich habe einen collapse Button eingebaut der sich beim Klicken öffnet. Das funktioniert auch, allerdings nur bei großen Display. Auf dem Handy kann man den Button nicht mehr anklicken!

Woran liegt das?

Lg Paddy

...zur Frage

CSS hilfe bei der position?

Hallo ich brauche unbedint eure Hilfe...

Ich versuche einen button genau an einer stelle zu positionieren, jedoch verschiebt sich die position immer bei einem anderen monitor.

Ich hoffe ihr versteht mein Problem und könnt mir helfen.

Hier nochmal mein Code von meinem Button...

MFG

CSS:

a.newsletter{

position: absolute;

top: 53%;

left: 70%;

transform: translate(-50%, -50%);

width: 100px;

height: 33px;

text-align: center;

line-height: 33px;

text-transform: uppercase;

color: #808080;

font-family: sans-serif;

text-decoration: none;

transition: 0.5s;

font-size: 15px;

transition: 0.5s;

overflow: hidden;

}

a.newsletter:hover{

color: #000;

}

a.newsletter:before{

content: '';

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: #0d0d0d;

z-index: -1;

transition: 0.5s;

box-sizing: border-box;

}

a.newsletter:hover:before{

top: calc(100% - 2px) ;

}

a.newsletter:after{

content: '';

position: absolute;

top: calc(-100% + 2px);

left: 100%;

width: 100%;

height: 100%;

background: #0d0d0d;

z-index: -1;

transition: 0.5s;

box-sizing: border-box;

}

a.newsletter:hover:after{

left: 0;

transition-delay: 0.5s;

}

a.newsletter:hover span{

transform: scaleY(1);

transition-delay: 1s; 

}

span.footerser{

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

border-left: 2px solid #0d0d0d;

border-right: 2px solid #0d0d0d;

box-sizing: border-box;

transform: scaleY(0);

transform-origin: top;

transition: 0.5s;

}

...zur Frage

CSS variable für transition funktioniert nicht?

warum funktioniert die Transition variable in meinem css code unten nicht? wenn ich statt 'var(--dur);' '1s' hinschreibe gehts auch? hat jemand eine Idee?

:root { --dur: 1s; }

test {

height: 500px;
transition: var(--dur);
border: 5px solid black;

}

test:hover {

height: 700px;

}

...zur Frage

HTML Komplette Zeile einer Tabelle als Link

Hallo Community,

mal wieder habe ich ein Problem und zwar sagt die Überschrift schon alles.

Ich habe das Menü meiner Website in Tabellenform angelegt. Nun steht quasi in jeder Tabellenzeile ein Link. Das Problem ist, man muss auf den Text klicken, welcher als Link markiert ist.

Nun möchte ich aber, dass es genügt wenn man nur in die jeweilige Zeile klickt der Link geöffnet wird. Da die Tabellenzeile via CSS wie ein Button aussieht, jedoch nur der Text im "Button" angeklickt werden kann.

Ich hoffe ich konnte ungefähr beschreiben was ich möchte.

Danke schon einmal im Voraus

Mfg Eyevi

...zur Frage

Was möchtest Du wissen?