mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
80 lines
1.6 KiB
HTML
80 lines
1.6 KiB
HTML
<button class="bt" id="bt">
|
|
<span class="msg" id="msg"></span>
|
|
SEND
|
|
</button>
|
|
<style>
|
|
/* From Uiverse.io by wang3616359git - Tags: button */
|
|
.bt {
|
|
border: none;
|
|
user-select: none;
|
|
font-size: 18px;
|
|
color: white;
|
|
text-align: center;
|
|
background-color: #0873bd;
|
|
box-shadow: #cacaca 2px 2px 10px 1px;
|
|
border-radius: 12px;
|
|
height: 60px;
|
|
line-height: 60px;
|
|
width: 155px;
|
|
transition: all 0.2s ease;
|
|
position: relative;
|
|
}
|
|
|
|
.msg {
|
|
height: 0;
|
|
width: 0;
|
|
border-radius: 2px;
|
|
position: absolute;
|
|
left: 15%;
|
|
top: 25%;
|
|
}
|
|
|
|
.bt:active {
|
|
transition: all 0.001s ease;
|
|
background-color: #5d9fcd;
|
|
box-shadow: #97989a 0 0 0 0;
|
|
transform: translateX(1px) translateY(1px);
|
|
}
|
|
|
|
.bt:hover .msg {
|
|
animation: msgRun 2s forwards;
|
|
}
|
|
|
|
@keyframes msgRun {
|
|
0% {
|
|
border-top: #d6d6d9 0 solid;
|
|
border-bottom: #f2f2f5 0 solid;
|
|
border-left: #f2f2f5 0 solid;
|
|
border-right: #f2f2f5 0 solid;
|
|
}
|
|
|
|
20% {
|
|
border-top: #d6d6d9 14px solid;
|
|
border-bottom: #f2f2f5 14px solid;
|
|
border-left: #f2f2f5 20px solid;
|
|
border-right: #f2f2f5 20px solid;
|
|
}
|
|
|
|
25% {
|
|
border-top: #d6d6d9 12px solid;
|
|
border-bottom: #f2f2f5 12px solid;
|
|
border-left: #f2f2f5 18px solid;
|
|
border-right: #f2f2f5 18px solid;
|
|
}
|
|
|
|
80% {
|
|
border-top: transparent 12px solid;
|
|
border-bottom: transparent 12px solid;
|
|
border-left: transparent 18px solid;
|
|
border-right: transparent 18px solid;
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(150px);
|
|
border-top: transparent 12px solid;
|
|
border-bottom: transparent 12px solid;
|
|
border-left: transparent 18px solid;
|
|
border-right: transparent 18px solid;
|
|
}
|
|
}
|
|
</style>
|