Skip to content

Instantly share code, notes, and snippets.

@Orivoir
Last active August 29, 2019 19:53
Show Gist options
  • Save Orivoir/aaf5c41bf02cdc2a2e2d778e50e8651a to your computer and use it in GitHub Desktop.
Save Orivoir/aaf5c41bf02cdc2a2e2d778e50e8651a to your computer and use it in GitHub Desktop.
Button :hover UI
<div class="wrap-btn">
<button>
Lorem
<span></span>
<span></span>
<span></span>
<span></span>
</button>
<button>
Ipsum
<span></span>
<span></span>
<span></span>
<span></span>
</button>
</div>
<div class="sound">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap');
body {
background: rgb(30,30,42);
}
div.wrap-btn {
width: 100%;
height: 100%;
display: flex;
justify-content: space-around;
align-items: center;
}
button {
font-family: "Josefin Sans";
cursor: pointer;
display: inline-block;
border: 2.4vh solid #b18d3f;
background: transparent;
color: #b18d3f;
padding: 8vh 22vh;
font-size: 15vh;
font-weight: bold;
letter-spacing: 2.5vh;
text-transform: lowercase;
position: relative;
transition: .35s linear all;
border-radius: 50px;
overflow: hidden;
}
.wrap-btn span {
dispay: inline-block;
position: absolute;
width: 25%;
height: 100%;
background: #b18d3f;
left: 0;
top: 0;
z-index: -1;
transform: translateY(100%);
border-radius: 50px;
transition: .17s linear all;
}
span:nth-child(2) {
left: 25%;
transition: .28s linear all;
}
span:nth-child(3) {
left: 50%;
transition: .37s linear all;
}
span:nth-child(4) {
left: 75%;
transition: .55s linear all;
}
button:hover {
color: rgb(30,30,42);
}
button:hover span {
transform: translateY(0);
border-radius:0;
}
button:hover span:nth-child(1) {
border-top-left-radius: 25px;
border-bottom-left-radius: 25px;
}
button:hover span:nth-child(4) {
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
}
.sound {
text-align:center;
height: 13vh;
width: 50%;
margin: auto;
margin-top: 34vh;
display: flex;
justify-content: center;
}
@keyframes soundMove {
from {
height: 4vh;
}
20% {
height: 5vh;
}
30% {
height: 4vh;
}
40% {
height: 6vh;
}
50% {
height: 9vh;
}
60% {
height: 7.2vh;
}
70% {
height: 11vh;
}
80% {
height: 9vh;
}
90% {
height: 6.5vh;
}
to {
height: 4vh;
}
}
.sound span {
display: inline-block;
width: 8vh;
/* transform: rotate(90deg); */
min-height: 4vh;
background: rgb(186,55,55);
animation: soundMove 1.35s linear infinite;
/* position: absolute; */
}
.sound span:nth-child( 1 ) {
animation-delay: .3s;
}
.sound span:nth-child( 1 ) {
animation-delay: .18s;
}
.sound span:nth-child( 2 ) {
animation-delay: .6s;
}
.sound span:nth-child( 3 ) {
animation-delay: .21s;
}
.sound span:nth-child( 4 ) {
animation-delay: .27s;
}
.sound span:nth-child( 5 ) {
animation-delay: .33s;
}
.sound span:nth-child( 6 ) {
animation-delay: .38s;
}
.sound span:nth-child( 7 ) {
animation-delay: .42s;
}
.sound span:nth-child( 8 ) {
animation-delay: .53s;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment