Link als Button mit css darstellen?

Wie man auf dem Bild sieht geht das schon ganz gut. Jedoch muss ich auf den Text klicken um den Link zu "aktivieren". Ich möchte jedoch das der "Zwischenraum" zwischen Link und Border auch als Link funktioniert.

Hat da einer ne Idee?

Danke und schöne Grüße

5 Antworten

emtonsitaht

25.07.2017, 13:21

Du hast mehrere Möglichkeiten, deinen Link zu stylen. Wenn du mal nachlesen willst, wie das genau funktioniert, dann schaue doch einfach mal hier rein: https://www.w3schools.com/css/css_pseudo_classes.asp

kuechentiger

25.07.2017, 13:00

a { display:block }

clonefish66

25.07.2017, 20:44

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

tacky2017

25.07.2017, 12:40

Die schönste Buttons bekommt man mit Bootstrap hin, google das mal und lese es dir durch.

emtonsitaht

25.07.2017, 13:23

Hast du überhaupt eine Ahnung?!:D Bootstrap ist auch nur ein Framework, welches für die mobile Optimierung entwickelt wurde. Die Buttons, welche du mit Bootstrap ''bastelst'', kannst du genau so gut selbst ''basteln''. CSS bleibt CSS. Bootstrap bietet nur Vorlagen.

tacky2017

25.07.2017, 14:42

@emtonsitaht

Ja das stimmt ist aber für jemanden der keine Ahnung hat am einfachsten. Und so sieht der Button oben aus ;-)

Allesnoob12

Fragesteller

25.07.2017, 15:02

@tacky2017

Ich schaue es mir mal zuhause auf dem privaten Rechner an :D Danke

Babelfish

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, JavaScript

25.07.2017, 13:21

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

https://jsfiddle.net/874g3v9j/

Sollte eigentlich alles selbsterklärend sein.

Gruß

Woher ich das weiß:Berufserfahrung – Entwickle Webseiten seit über 25 Jahren.

Allesnoob12

Fragesteller

25.07.2017, 14:01

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

Babelfish

25.07.2017, 14:38

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

Allesnoob12

Fragesteller

25.07.2017, 15:02

@Babelfish

Du hast vollkommen recht! :D Danke dir.

Die Aufgabenstellung lautet:

"Füge der Webseite einen Button hinzu, bei dessen Betätigung eine Box erscheint, die den Text anzeigt: „Diese Funktion ist noch nicht implementiert. Bitte schließen.“

Die Box soll beim Klick auf den Text wieder unsichtbar werden.

Die Box soll ihre Farbe ändern, wenn man mit der Maus darauf fährt."

Einzelne Punkte schaffe ich, aber nicht dass die Box z.B. wieder weg geht wenn man in den Text klickt ...

Freue mich über jede Nachricht!

...zur Frage

Css button bei klick speichern?

ich will mit einem klick mein Button durchstreichen, das funktioniert auch mit

button:focus{
    text-decoration: line-through;
}

doch wenn ich dann einen anderen Button drücke welcher die gleiche CSS klasse hat wird es bei dem einem Button entfernt und beim anderen hinzugefügt. Dass heißt ich kann es nur auf einem button gleichzeitig anwenden. Wie kann ich es auf allen gleichzeitig haben?

...zur Frage

HTML/CSS Kreis Animation um Element bei Klick?

Hey, ihr kennt doch sicherlich die Animationen die Google verwendet. Ihr klickt auf einen Button und um den Button bildet sich ein Kreis beim Klick (Animation). Ich weiß, etwas Blöd erklärt aber falls ihr nicht versteht was ich meine, habe ich euch ein Bild da gelassen. Wir bekomme ich das mit HTML/CSS hin?

...zur Frage

Css Elemente nebeneinander und nicht untereinander?

Wie kann ich diese Elemente so positionieren, dass sie nebeneinander und nicht untereinander sind?

HTML:

  <div>
    <div v-for="recipe in recipes" :key="recipe.id">
      <div class="recipe">
        <img class="recipe-img" :src="recipe.img" alt="" />
        <div class="recipe-description">
          <h3 class="recipe-title">{{ recipe.title }}</h3>
          <h4 class="recipe-time">
            <i class="far fa-clock"></i> {{ recipe.time }} Minutes
          </h4>
          <h4 class="level">
            <i class="far fa-check-circle"></i> {{ recipe.level }} to make
          </h4>
        </div>
      </div>
    </div>
  </div>

CSS:

.recipe-img {
  width: 300px;
  height: 300px;
  object-fit: cover;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}


.recipe {
  margin: 30px;
}


.recipe-description {
  text-align: center;
  margin-top: 10px;
  border: 1px solid #444;
  border-top: none;
  padding: 10px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  background-color: #444;
  color: white;
  width: 300px;
}


.recipe-title,
.recipe-time,
.recipe-level {
  margin: 5px;
}

...zur Frage

Box ohne text <html/CSS>?

Hallo,

ich möchte eine Box also einen quader programmieren mit Rahmen (kein text imput), in den ich später einen Button reingeben und den border-radius möchte ich auch bearbeiten.

Kennt irgendjemand den html code dafür?

Danke im voraus

...zur Frage

CSS: Wie kann ich die Unterlinie des Texts wegbekommen?

Hallo. Irgendwie geht die text-decoration bei mir nicht weg. Bitte helft mir.

HTML:

 <button class="cn"><a href="#">create</a></button>

CSS:

.cn {
  text-decoration: none;
  width: 160px;
  height: 40px;
  background: #23002f;
  border: none;
  margin-bottom: 10px;
  margin-left: 20px;
  font-size: 18px;
  border-radius: 10px;
  cursor: pointer;
  transition: .4s ease;
  margin-left: 350px;
  margin-top: 5px;
}

...zur Frage

Mit einem Button klick CSS verändern?

Ich will, das wenn ich auf ein Knopf drücke, sich die Farbe von meinem Text ändert wie geht das?

...zur Frage

Html, CSS und JS Liste?

Guten Tag,

Wir müssen eine Einkaufsliste mit HTML, CSS und JS machen. Es soll in einer Liste aufgezählt werden, wenn man auf Hinzufügen drückt. Man soll es links eingeben können und das was man dort schreibt wird dann aufgelistet. Sobald man Hinzufügen gedrückt hat soll das Feld auf der linken Seite wieder geleert werden.

<ul >
 <li></li>
 <li></li>
</ul>

Es wäre top, wenn mir jemand helfen könnte :)

...zur Frage

HTML Seite verschiebt bei Verkleinerung?

Hallo, ich bin Anfänger was HTML und CSS angeht und habe meine erste Website fürs erste fertig. Nun bin ich beim verkleinern des Windows auf das Problem gestoßen, dass sich die Objekte verschieben und unteranderem auch Überlappen...

Wie kann ich dem entgegen steuern? Gibt es da eine Möglichkeit?

...zur Frage

Kann jemand diesen Button in HTML CSS umwandeln?

Hallo,

schafft es jemand, mir diesen Button in HTML und CSS zu machen?

Border color ist #f5bf8c

Font color ist #363639

Gradient links ist #fdc591

Gradient recht ist #cd9969

Und dann ist da noch so ein kleiner Schatten nach außen (gold) und nach Innen ein kleiner, schwarzer Schatten

...zur Frage

Blur mit Javascript entfernen?

Ich habe ein div Element mit CSS "geblurt". Jetzt würde ich den Blur Effekt gerne mittels Javascript mit einem Klick entfernen, sodass man den Text wieder einwandfrei lesen kann. Wie Stelle ich das an?

...zur Frage

CSS Buttons verschieben?

Hallo, ich möchte auf meiner Website, dass die Buttons untereinander und nicht nebeneinander angezeigt werden wie hier:

habe schon einiges probiert aber nichts funktioniert richtig...

mein html Code ist das hier:

<!DOCTYPE html>
<html lang="de">
<head>
    <link href="style_bypass.css" rel="stylesheet">
    <title>Bypass</title>
</head>
<body id="links">


<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Set Lockscreen</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Einstellungen</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Test Video</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Galaxy Store</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Google Quick Search</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Youtube</button></a>



</body>

Und mein CSS Code der hier:

button {
    --border: 5px;    /* the border width */
    --slant: 0.7em;   /* control the slanted corners */
    --color: #37E8FC; /* the color */
    
    font-size: 35px;
    padding: 0.4em 1.2em;
    border: none;
    cursor: pointer;
    font-weight: bold;
    color: var(--color);
    background: 
       linear-gradient(to bottom left,var(--color)  50%,#0000 50.1%) top right,
       linear-gradient(to top   right,var(--color)  50%,#0000 50.1%) bottom left;
    background-size: calc(var(--slant) + 1.3*var(--border)) calc(var(--slant) + 1.3*var(--border));
    background-repeat: no-repeat;
    box-shadow:
      0 0 0 200px inset var(--s,#0000),
      0 0 0 var(--border) inset var(--color);
    clip-path: 
        polygon(0 0, calc(100% - var(--slant)) 0, 100% var(--slant),
                100% 100%, var(--slant) 100%,0 calc(100% - var(--slant))
               );
    transition: color var(--t,0.3s), background-size 0.3s;
  }
  button:hover,
  button:active{
    background-size: 100% 100%;
    color: #fff;
    --t: 0.2s 0.1s;
  }
  button:focus-visible {
    outline-offset: calc(-1*var(--border));
    outline: var(--border) solid #000a;
  }
  button:active {
    --s: #0005;
    transition: none;
  }
  
  
  
  body#links {
    display:grid;
    grid-auto-flow:column;
    grid-gap:px;
    place-content:center;
    margin:0;
    height:100vh;
    background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  }

Was genau muss ich in der CSS Datei bearbeiten, dass die Buttons nicht nebeneinander sondern untereinander angezeigt werden?

...zur Frage

Wie kann ich mit CSS ein anderes Element verändern?

also wenn ich zB. auf einen Button klicke, und irgendein anderes Element soll dann sichtbar werden.

Das geht doch auch mit CSS?

...zur Frage

Wie kann ich den Abstand zwischen HTML-Tags entfernen?

HI, ich programmiere gerade einen Taschenrechner in HTML/CSS/JavaScript und möchte den Abstand zwischen den Elementen entfernen. Margin, Padding und Border sind bereits auf 0 gestellt. Der Abstand ist auch nur horizontal zwischen den Elementen. Vielen Dank im Voraus :-)

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen