mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 13:10:21 +08:00
51 lines
1 KiB
HTML
51 lines
1 KiB
HTML
<button class="Btn">
|
|
</button>
|
|
<style>
|
|
/* From Uiverse.io by vinodjangid07 - Tags: gradient, button, hover effect, gold, golden effect , subscribe, premium */
|
|
.Btn {
|
|
width: 140px;
|
|
height: 40px;
|
|
border: none;
|
|
border-radius: 10px;
|
|
background: linear-gradient(to right,#77530a,#ffd277,#77530a,#77530a,#ffd277,#77530a);
|
|
background-size: 250%;
|
|
background-position: left;
|
|
color: #ffd277;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
transition-duration: 1s;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.Btn::before {
|
|
position: absolute;
|
|
content: "SUBSCRIBE";
|
|
color: #ffd277;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 97%;
|
|
height: 90%;
|
|
border-radius: 8px;
|
|
transition-duration: 1s;
|
|
background-color: rgba(0, 0, 0, 0.842);
|
|
background-size: 200%;
|
|
}
|
|
|
|
.Btn:hover {
|
|
background-position: right;
|
|
transition-duration: 1s;
|
|
}
|
|
|
|
.Btn:hover::before {
|
|
background-position: right;
|
|
transition-duration: 1s;
|
|
}
|
|
|
|
.Btn:active {
|
|
transform: scale(0.95);
|
|
}
|
|
</style>
|