Guten Tag liebe html.de-Community,
ich habe den Versuch gestartet, einen Button etwas anschaulicher zu gestalten. Dazu habe ich die Buttons auf folgender Seite als Vorlage verwendet: https://www.spacex.com/. Mit dem Resultat bin ich jedoch nur teilweise zufrieden. Die Animation ist nicht so schön, wie beim Original. Darüber hinaus gibt es mit Sicherheit schönere Methoden dies umzusetzen. Ich würde mich freuen, wenn mir jemand ein kurzes Feedback zum code geben und eventuell eine "bessere" Methode zur Verfügung stellen könnte.
ich habe den Versuch gestartet, einen Button etwas anschaulicher zu gestalten. Dazu habe ich die Buttons auf folgender Seite als Vorlage verwendet: https://www.spacex.com/. Mit dem Resultat bin ich jedoch nur teilweise zufrieden. Die Animation ist nicht so schön, wie beim Original. Darüber hinaus gibt es mit Sicherheit schönere Methoden dies umzusetzen. Ich würde mich freuen, wenn mir jemand ein kurzes Feedback zum code geben und eventuell eine "bessere" Methode zur Verfügung stellen könnte.
HTML:
<!DOCTYPE html>
<html lang="de">
<head>
<style>
.button-main{
display: flex;
justify-content: center;
align-items: center;
border: solid 2.5px #fff;
background-color: transparent;
width: 150px;
height: 50px;
}
.button-hover{
position: absolute;
width: 150px;
height: 50px;
bottom:12px;
background-color: #fff;
animation: btn_hover_out .5s forwards;
}
.button-main:hover .button-hover{
height: 50px;
background-color: #fff;
animation: btn_hover_in .5s forwards;
}
@keyframes btn_hover_in {
from { height:0px}
to { height:50px}
}
@keyframes btn_hover_out {
from { top:215px; height:50px}
to { top:215px; height:0px}
}
.button-main span{
color: #fff;
font-size: 18px;
font-weight: bold;
z-index: 1;
}
.button-main:hover span{
color: #1e2125;
}
</style>
</head>
<body>
<a class="button-animation" href="http://nachtleben-rpg.de/" target="_blank">
<div class="button-main"><span>Tutorial</span>
<div class="button-hover"></div>
</div>
</a>
</body>
</html>
Zuletzt bearbeitet:
