A button idea that I had this morning, so I put it down on code pen quickly :)
A Pen by Jake Schoolmeesters on CodePen.
<div class="overflow-hide"> | |
<div class="hole"></div> | |
<div class="button">Pop up button</div> | |
</div> |
body { | |
background: tomato; | |
} | |
.overflow-hide { | |
height: 60px; | |
width: 190px; | |
display: block; | |
margin: 150px auto; | |
overflow: hidden; | |
position: relative; | |
} | |
.hole { | |
content: ""; | |
display: block; | |
width: 190px; | |
position: absolute; | |
bottom: 0; | |
margin: 0 auto; | |
height: 10px; | |
border-radius: 20px; | |
background: black; | |
z-index: 0; | |
} | |
.button { | |
height: 60px; | |
width: 180px; | |
text-align: center; | |
line-height: 1.8; | |
color: white; | |
display: block; | |
position: relative; | |
background-color: #105f98; | |
margin: 0 auto; | |
transform: translateY(30px); | |
transition: transform 200ms ease-in-out; | |
&:after { | |
content: ""; | |
display: block; | |
position: absolute; | |
width: 180px; | |
height: 5px; | |
background: black; | |
bottom: 0; | |
transform: translateY(-30px); | |
transition: transform 200ms ease-in-out; | |
} | |
&:hover { | |
transform: translateY(0); | |
&:after { | |
transform: translateY(0); | |
} | |
} | |
} |