Button design html css Sargam
<html>
<head>
<style>
.button {
position: relative;
transition: all 0.3s ease-in-out;
padding-block: 0.5rem;
padding-inline: 1.25rem;
background-color: rgb(0 107 179);
border-radius: 9999px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: #ffff;
gap: 10px;
font-weight: bold;
border: 3px solid #ffffff4d;
outline: none;
overflow: hidden;
font-size: 15px;
}
.icon {
width: 24px;
height: 24px;
transition: all 0.3s ease-in-out;
}
.button:hover {
border-color: #fff9;
}
.button:hover .icon {
transform: translate(4px);
}
.button:hover::before {
animation: shine 1.5s ease-out infinite;
}
.button::before {
content: "";
position: absolute;
width: 100px;
height: 100%;
background-image: linear-gradient(
120deg,
rgba(255, 255, 255, 0) 30%,
rgba(255, 255, 255, 0.8),
rgba(255, 255, 255, 0) 70% );
top: 0;
left: -100px;
opacity: 0.6;
}
@keyframes shine {
0% {
left: -100px;
}
60% {
left: 100%;
}
to {
left: 100%;
}
}
</style>
</head>
<body>
<!--Button-->
<a href="#"><button class="button">
Apply Now
<svg fill="currentColor" viewBox="0 0 24 24" class="icon">
<path clip-rule="evenodd"d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm4.28 10.28a.75.75 0 000-1.06l-3-3a.75.75 0 10-1.06 1.06l1.72 1.72H8.25a.75.75 0 000 1.5h5.69l-1.72 1.72a.75.75 0 101.06 1.06l3-3z" fill-rule="evenodd">
</path></svg></button></a>
</body>
</html>
Post a Comment