Streethawk68
Neues Mitglied
Hallo Profis, Fans und Bastler!
Ich möchte den CSS-Transition-Effekt bei hover nutzen; das klappt aber nicht. Hier der Code:
Und hier der CSS-Code:
Wer hätte eine Idee?
Euer Streethawk68
Ich möchte den CSS-Transition-Effekt bei hover nutzen; das klappt aber nicht. Hier der Code:
HTML:
<head>
<link href="css/hyperlinks_als_button.css" rel="stylesheet">
</head>
<body>
<!-- <h1>Links als Buttons</h1> -->
<section class="angebot">
<h2>Ab auf die Insel</h2>
<figure>
<img src="bilder/schiermonnikoog-strand.jpg" width="512" height="384" alt="Strand auf Schiermonnikoog">
<figcaption>
<a href="#" class="button-primary">Jetzt buchen</a>
<a href="#" class="button-secondary">Mehr Infos</a>
</figcaption>
</figure>
</section>
</body>
CSS:
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 1.5;
text-align: center;
background: #fbf9f3;
max-width: 600px;
padding: 1rem;
margin: 1rem auto;
}
.button-primary, .button-secondary {
display: inline-block; /* nebeneinander, aber wie Blockbox */
text-align: center;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
padding: 1rem;
margin-top: 1rem;
}
.button-primary {
background: steelblue;
color: white;
margin-right: 2rem;
}
.button-secondary {
background: transparent;
color: steelblue;
border: 2px solid steelblue;
}
.button-primary:hover, .button-primary:focus {
background-color: #b4464b;
color: white;
transition: all 0.2s ease;
}
.button-secondary:hover, .button-secondary:focus {
background-color: steelblue;
transition: all 0.2s ease;
}
Wer hätte eine Idee?
Euer Streethawk68