mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
56 lines
955 B
HTML
56 lines
955 B
HTML
<button class="button1">
|
|
Click me!
|
|
</button>
|
|
<style>
|
|
/* From Uiverse.io by newrocker2468 - Tags: simple, green, button, hover, simple button, #button */
|
|
.button1 {
|
|
background-color: white;
|
|
font-weight: bold;
|
|
font-size: 1em;
|
|
border: none;
|
|
border-radius: 5px;
|
|
padding: 1.2em;
|
|
color: rgb(0, 0, 0);
|
|
cursor: pointer;
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: all 500ms;
|
|
z-index: 99;
|
|
}
|
|
|
|
.button1::after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 25px;
|
|
height: 25px;
|
|
border-radius: 20px;
|
|
bottom: -30px;
|
|
left: 45px;
|
|
background-color: #5affc0;
|
|
z-index: -99;
|
|
transition: all 500ms;
|
|
}
|
|
|
|
.button1:hover::after {
|
|
width: 120px;
|
|
height: 60px;
|
|
border-radius: 10px;
|
|
transition: all 500ms;
|
|
bottom: -1px;
|
|
left: -1px;
|
|
}
|
|
|
|
.button1:hover {
|
|
border-radius: 20px;
|
|
box-shadow: 0 0 100px 20px #5affc0;
|
|
}
|
|
|
|
.button1:active {
|
|
transform: translateY(10px);
|
|
}
|
|
|
|
.button1:focus {
|
|
border: 5px solid #a0fad8;
|
|
}
|
|
|
|
</style>
|