<button>
<h1>Join Now</h1>
<div></div>
</button>
body {
background: #111;
margin: 50px auto 0 auto;
width: 200px;
}
button {
background: none;
border: 0;
cursor: pointer;
height: 150px;
position: relative;
width: 150px;
&:hover .arrow,
&:hover .arrow:before,
&:hover .arrow:after {
background: #13d7d2;
}
&:hover h1 {
color: #fff;
}
}
div {
background: #08f1eb;
height: 20px;
position: relative;
width: 150px;
&:before,
&:after {
content: '';
width: 40px;
height: 50px;
transform: skew(30deg);
background: #08f1eb;
position: absolute;
top: -40px;
right: 0;
}
&:after {
transform: skew(-30deg);
top: 10px;
}
}
h1 {
color: #08f1eb;
font: normal 30px/61px verdana, sans-serif;
margin-left: 0px;
position: absolute;
top: -7px;
left: 0;
text-transform: uppercase;
width: 100px;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.