mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
56 lines
1.7 KiB
HTML
56 lines
1.7 KiB
HTML
<button>
|
|
<p>Submit</p>
|
|
</button>
|
|
<style>
|
|
/* From Uiverse.io by satyamchaudharydev - Tags: button */
|
|
button {
|
|
border: none;
|
|
width: 140px;
|
|
height: 55px;
|
|
color: #fff;
|
|
font-family: "Arial";
|
|
letter-spacing: 1.2px;
|
|
font-weight: bold;
|
|
z-index: 1;
|
|
display: flex;
|
|
background: #000;
|
|
position: relative;
|
|
}
|
|
|
|
button p {
|
|
margin: 0 auto;
|
|
align-self: center;
|
|
font-size: 1.5em;
|
|
text-align: center;
|
|
}
|
|
|
|
button::after, button::before {
|
|
position: absolute;
|
|
content: "";
|
|
width: 100%;
|
|
z-index: -1;
|
|
height: 10%;
|
|
clip-path: polygon(0% 74%, 4% 75%, 8% 76%, 11% 77%, 15% 78%, 20% 78%, 25% 77%, 32% 77%, 37% 75%, 40% 74%, 43% 74%, 46% 73%, 52% 72%, 57% 72%, 65% 74%, 66% 75%, 71% 78%, 75% 82%, 81% 86%, 83% 88%, 88% 91%, 90% 94%, 94% 96%, 98% 98%, 100% 100%, 82% 100%, 0 100%);
|
|
background: #97c45d;
|
|
transition: 0.2s cubic-bezier(.02,.02,.23,.73);
|
|
}
|
|
|
|
button::after {
|
|
bottom: 0;
|
|
}
|
|
|
|
button::before {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
button:hover::after {
|
|
clip-path: path('M0 199.88C8.33 270.71 16.67 306.13 25 306.13C37.5 306.13 35.91 231.4 50 231.13C64.09 230.85 62.5 284.25 75 284.25C87.5 284.25 87.17 208.05 100 212.38C112.83 216.7 112.71 300.8 125 300.47C137.29 300.13 137.76 239.04 150.48 237.38C163.19 235.71 162.16 293.63 174.54 293.63C182.79 293.63 191.28 262.38 200 199.88L200 0.13L0 0.13L0 199.88Z');
|
|
height: 30%;
|
|
}
|
|
|
|
button:hover::before {
|
|
clip-path: path('M0 199.88C8.33 270.71 16.67 306.13 25 306.13C37.5 306.13 35.91 231.4 50 231.13C64.09 230.85 62.5 284.25 75 284.25C87.5 284.25 87.17 208.05 100 212.38C112.83 216.7 112.71 300.8 125 300.47C137.29 300.13 137.76 239.04 150.48 237.38C163.19 235.71 162.16 293.63 174.54 293.63C182.79 293.63 191.28 262.38 200 199.88L200 0.13L0 0.13L0 199.88Z');
|
|
height: 100%;
|
|
}
|
|
|
|
</style>
|