CSS transition funktioniert nicht

Hallo Profis, Fans und Bastler! Ich möchte den CSS-Transition-Effekt bei hover nutzen; das klappt aber nicht. Wer hätte eine Idee?

Der hier verwendete 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>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!