پیشنمایش زنده
کد HTML
<button class="button">
<span class="text">Book Flight</span>
<span class="afterText">Booked!</span>
<svg class="clouds" fill="#ffffff" height="200px" width="200px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 376.22 376.22" xml:space="preserve" stroke="#ffffff"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M338.103,201.978c1.733-6.085,2.61-12.372,2.61-18.756c0-37.746-30.708-68.455-68.454-68.455 c-15.702,0-31.042,5.453-43.193,15.354c-10.807,8.805-18.705,20.773-22.558,34.057c-25.26-2.36-48.097,13.667-55.234,37.059 c-3.824-0.87-7.731-1.309-11.671-1.309c-29.051,0-52.686,23.464-52.686,52.514c0,29.051,23.635,52.515,52.686,52.515h183.931 c29.051,0,52.685-23.464,52.685-52.515C376.22,228.676,360.49,208.367,338.103,201.978z"></path> <path d="M130.402,177.248l2.936,0.016l1.444-2.556c10.411-18.427,29.165-30.778,50.168-33.04l2.788-0.3l1.197-2.535 c0.995-2.106,2.117-4.23,3.334-6.313l2.045-3.498l-2.998-2.725c-8.986-8.17-20.753-12.669-33.131-12.669 c-1.311,0-2.637,0.054-3.968,0.162c-7.85-24.892-32.261-42.525-59.755-42.525c-34.414,0-62.412,26.82-62.412,59.787 c0,5.289,0.718,10.5,2.141,15.555C14.072,152.409,0,170.187,0,190.789c0,25.457,21.612,46.167,48.178,46.167h16.221l0.648-4.244 c4.906-32.088,32.06-55.398,64.612-55.512C129.907,177.229,130.155,177.247,130.402,177.248z"></path> </g> </g></svg>
</button>
کد CSS
.button {
height: 4em;
width: 12em;
border-radius: 18px;
border: 4px solid lightskyblue;
padding: 0.2em;
overflow: hidden;
}
.text {
display: block;
font-size: 20px;
color: lightskyblue;
}
.afterText {
display: none;
}
.clouds {
display: none;
height: 4rem;
width: 8rem;
}
.button:hover {
cursor: pointer;
}
.button:hover .text {
text-decoration: underline;
font-weight: bold;
}
.button:focus {
transition: ease-in 200ms;
background-color: lightskyblue;
border: none;
}
.button:focus .text {
display: none;
}
.button:focus .afterText {
animation: hoverMovement 1s ease-in alternate infinite;
display: block;
font-size: 25px;
letter-spacing: 5px;
color: rgb(90, 94, 97);
}
.button:focus .clouds {
display: block;
animation: cloudMovement ease-in-out 3s infinite;
margin-top: -1.5em;
}
@keyframes hoverMovement {
from {
transform: translateY(0em);
}
to {
transform: translateY(-0.1em);
}
}
@keyframes cloudMovement {
from {
transform: translateX(-5em);
}
to {
transform: translateX(10em);
}
}