mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
121 lines
No EOL
2.7 KiB
HTML
121 lines
No EOL
2.7 KiB
HTML
<button class="button">
|
|
<div class="in">
|
|
<div class="image">
|
|
<svg
|
|
fill="#000000"
|
|
width="25px"
|
|
height="25px"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
transform="rotate(-45)"
|
|
>
|
|
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
|
|
<g
|
|
id="SVGRepo_tracerCarrier"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
></g>
|
|
<g id="SVGRepo_iconCarrier">
|
|
<path
|
|
d="M20.34,9.32l-14-7a3,3,0,0,0-4.08,3.9l2.4,5.37h0a1.06,1.06,0,0,1,0,.82l-2.4,5.37A3,3,0,0,0,5,22a3.14,3.14,0,0,0,1.35-.32l14-7a3,3,0,0,0,0-5.36Zm-.89,3.57-14,7a1,1,0,0,1-1.35-1.3l2.39-5.37A2,2,0,0,0,6.57,13h6.89a1,1,0,0,0,0-2H6.57a2,2,0,0,0-.08-.22L4.1,5.41a1,1,0,0,1,1.35-1.3l14,7a1,1,0,0,1,0,1.78Z"
|
|
></path>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div class="text">Send Message</div>
|
|
</div>
|
|
</button>
|
|
|
|
<style>
|
|
/* From Uiverse.io by anushkaps - Tags: animation, alert, gradient, button, code, svg, arrow, 2d button */
|
|
.button {
|
|
cursor: pointer;
|
|
height: 6em;
|
|
width: 18em;
|
|
border-radius: 1em;
|
|
border-top: 0.2em solid #b0b1b0;
|
|
border-bottom: 0.2em solid #50504f;
|
|
border-left: 0.2em solid #848584;
|
|
border-right: 0.2em solid #848584;
|
|
box-shadow: 0.3em 0.3em 0.5em #a9aaa9;
|
|
background: linear-gradient(to bottom, #fbfcfb, #ecedec);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.button::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
border-radius: inherit;
|
|
padding: 0.2em;
|
|
background: linear-gradient(135deg, #b0b1b0, #848584, #50504f);
|
|
z-index: -1;
|
|
}
|
|
|
|
.in {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
height: 4.8em;
|
|
width: 16.9em;
|
|
border-radius: 2em;
|
|
background: linear-gradient(to bottom, #eceeec, #ffffff);
|
|
transition: background 2s, transform 2s ease;
|
|
}
|
|
|
|
.text {
|
|
font-size: 21px;
|
|
font-weight: bold;
|
|
width: 9em;
|
|
color: #252625;
|
|
transition: transform 0.6s ease-in-out;
|
|
}
|
|
|
|
.image {
|
|
padding-left: 1.2em;
|
|
transition: transform 0.3s ease-in-out;
|
|
}
|
|
|
|
.image svg {
|
|
transition: transform 0.6s ease-in-out; /* Smooth rotation */
|
|
}
|
|
|
|
.button:hover .in {
|
|
background: linear-gradient(to bottom, #ffffff, #eceeec);
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.button:hover .image {
|
|
animation: fly-1 0.6s ease-in-out infinite alternate;
|
|
}
|
|
|
|
.button:hover svg {
|
|
transform: translateX(6.5em) rotate(2deg);
|
|
}
|
|
|
|
.button:hover .text {
|
|
transform: translateX(9em);
|
|
}
|
|
|
|
.button:active {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
@keyframes fly-1 {
|
|
from {
|
|
transform: translateY(0.1em);
|
|
}
|
|
to {
|
|
transform: translateY(-0.1em);
|
|
}
|
|
}
|
|
|
|
</style>
|
|
|