mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 13:10:21 +08:00
46 lines
1.1 KiB
HTML
46 lines
1.1 KiB
HTML
<div>
|
|
<button class="btn"><i class="animation"></i>BUTTON<i class="animation"></i>
|
|
</button>
|
|
</div>
|
|
<style>
|
|
/* From Uiverse.io by mi-series - Tags: simple, material design, flashy, animation, purple, minimalist, button, animated */
|
|
.btn {
|
|
outline: 0;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background: #40B3A2;
|
|
min-width: 200px;
|
|
border: 0;
|
|
border-radius: 4px;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
|
|
box-sizing: border-box;
|
|
padding: 16px 20px;
|
|
color: #fff;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
letter-spacing: 1.2px;
|
|
text-transform: uppercase;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.btn:hover {
|
|
opacity: .95;
|
|
}
|
|
|
|
.btn .animation {
|
|
border-radius: 100%;
|
|
animation: ripple 0.6s linear infinite;
|
|
}
|
|
|
|
@keyframes ripple {
|
|
0% {
|
|
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1), 0 0 0 20px rgba(255, 255, 255, 0.1), 0 0 0 40px rgba(255, 255, 255, 0.1), 0 0 0 60px rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
100% {
|
|
box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.1), 0 0 0 40px rgba(255, 255, 255, 0.1), 0 0 0 60px rgba(255, 255, 255, 0.1), 0 0 0 80px rgba(255, 255, 255, 0);
|
|
}
|
|
}
|
|
</style>
|