Hallo Profis, Fans und Bastler!
Ich möchte den CSS-Transition-Effekt bei hover nutzen; das klappt aber nicht.
Wer hätte eine Idee?
Code
<style>
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;
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 2.2s ease;
}
.button-secondary:hover, .button-secondary:focus {
background-color: steelblue;
color:white;
transition: all 2.2s ease;
}
</style>
<body>
<section class="angebot">
<h2>Ab auf die Insel</h2>
<figure>
<img src="image/4.png" 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>