mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
116 lines
3.5 KiB
HTML
116 lines
3.5 KiB
HTML
<button class="btn-slice" href="#">
|
|
<div class="top"><span>Sliced Button</span></div>
|
|
<div class="bottom"><span>Sliced Button</span></div>
|
|
</button>
|
|
<style>
|
|
/* From Uiverse.io by Wlidha09 - Tags: button */
|
|
.btn-slice {
|
|
background-color: transparent;
|
|
padding: 1.2rem 2.5rem;
|
|
border: 2px solid #ffffff;
|
|
border-radius: 0rem;
|
|
color: #ffffff;
|
|
font-size: 0.6875rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.3rem;
|
|
position: relative;
|
|
-moz-transition: all 1000ms cubic-bezier(0.890, -0.170, 0.140, 1.225);
|
|
-o-transition: all 1000ms cubic-bezier(0.890, -0.170, 0.140, 1.225);
|
|
transition: all 1000ms cubic-bezier(0.890, -0.170, 0.140, 1.225);
|
|
/* custom */
|
|
-moz-transition-timing-function: cubic-bezier(0.890, -0.170, 0.140, 1.225);
|
|
-o-transition-timing-function: cubic-bezier(0.890, -0.170, 0.140, 1.225);
|
|
transition-timing-function: cubic-bezier(0.890, -0.170, 0.140, 1.225);
|
|
/* custom */
|
|
}
|
|
|
|
.btn-slice .top {
|
|
position: relative;
|
|
height: 6px;
|
|
overflow: hidden;
|
|
top: 0;
|
|
-moz-transition: all 300ms cubic-bezier(1.000, -0.055, 0.025, 1.040);
|
|
-o-transition: all 300ms cubic-bezier(1.000, -0.055, 0.025, 1.040);
|
|
transition: all 300ms cubic-bezier(1.000, -0.055, 0.025, 1.040);
|
|
/* custom */
|
|
-moz-transition-timing-function: cubic-bezier(1.000, -0.055, 0.025, 1.040);
|
|
-o-transition-timing-function: cubic-bezier(1.000, -0.055, 0.025, 1.040);
|
|
transition-timing-function: cubic-bezier(1.000, -0.055, 0.025, 1.040);
|
|
/* custom */
|
|
-webkit-transition-delay: 0.35s;
|
|
-moz-transition-delay: 0.35s;
|
|
-ms-transition-delay: 0.35s;
|
|
-o-transition-delay: 0.35s;
|
|
transition-delay: 0.35s;
|
|
}
|
|
|
|
.btn-slice .bottom {
|
|
position: relative;
|
|
height: 6px;
|
|
overflow: hidden;
|
|
bottom: 0;
|
|
-moz-transition: all 300ms cubic-bezier(1.000, -0.055, 0.025, 1.040);
|
|
-o-transition: all 300ms cubic-bezier(1.000, -0.055, 0.025, 1.040);
|
|
transition: all 300ms cubic-bezier(1.000, -0.055, 0.025, 1.040);
|
|
/* custom */
|
|
-moz-transition-timing-function: cubic-bezier(1.000, -0.055, 0.025, 1.040);
|
|
-o-transition-timing-function: cubic-bezier(1.000, -0.055, 0.025, 1.040);
|
|
transition-timing-function: cubic-bezier(1.000, -0.055, 0.025, 1.040);
|
|
/* custom */
|
|
-webkit-transition-delay: 0.35s;
|
|
-moz-transition-delay: 0.35s;
|
|
-ms-transition-delay: 0.35s;
|
|
-o-transition-delay: 0.35s;
|
|
transition-delay: 0.35s;
|
|
}
|
|
|
|
.btn-slice .bottom span {
|
|
top: -6px;
|
|
position: absolute;
|
|
left: 0;
|
|
}
|
|
|
|
.btn-slice:hover .top {
|
|
top: -5px;
|
|
-webkit-transition-delay: 0.35s;
|
|
-moz-transition-delay: 0.35s;
|
|
-ms-transition-delay: 0.35s;
|
|
-o-transition-delay: 0.35s;
|
|
transition-delay: 0.35s;
|
|
}
|
|
|
|
.btn-slice:hover .bottom {
|
|
bottom: -5px;
|
|
-webkit-transition-delay: 0.35s;
|
|
-moz-transition-delay: 0.35s;
|
|
-ms-transition-delay: 0.35s;
|
|
-o-transition-delay: 0.35s;
|
|
transition-delay: 0.35s;
|
|
}
|
|
|
|
.btn-slice:hover, .btn-slice:focus, .btn-slice:active {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.btn-slice:before {
|
|
content: '';
|
|
height: 1px;
|
|
width: 60px;
|
|
background-color: #ffffff;
|
|
position: absolute;
|
|
margin-top: 6px;
|
|
right: -35px;
|
|
-moz-transition: all 1000ms cubic-bezier(0.890, -0.170, 0.140, 1.225);
|
|
-o-transition: all 1000ms cubic-bezier(0.890, -0.170, 0.140, 1.225);
|
|
transition: all 1000ms cubic-bezier(0.890, -0.170, 0.140, 1.225);
|
|
/* custom */
|
|
-moz-transition-timing-function: cubic-bezier(0.890, -0.170, 0.140, 1.225);
|
|
-o-transition-timing-function: cubic-bezier(0.890, -0.170, 0.140, 1.225);
|
|
transition-timing-function: cubic-bezier(0.890, -0.170, 0.140, 1.225);
|
|
/* custom */
|
|
}
|
|
|
|
.btn-slice:hover:before {
|
|
width: 130%;
|
|
}
|
|
</style>
|