galaxy/Buttons/PriyanshuGupta28_smooth-elephant-43.html

31 lines
774 B
HTML

<button class="my-button">Click Me</button>
<style>
/* From Uiverse.io by PriyanshuGupta28 - Tags: gradient, button */
.my-button {
display: inline-block;
padding: 10px 20px;
font-size: 16px;
font-weight: bold;
text-align: center;
text-decoration: none;
color: white;
background-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
transition: 0.2s ease-in-out;
border: none;
border-radius: 4px;
cursor: pointer;
box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
}
.my-button:hover {
box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}
.my-button:active {
background-color: #00DBDE;
background-image: linear-gradient(90deg, #00DBDE 0%, #FC00FF 100%);
}
</style>