<div class="wrapper">
<a href="" class="link">ボタン</a>
</div>
.wrapper{
background: #e7e7e7;
padding: 3rem;
width: 15rem;
margin: 0 auto;
.link{
display: block;
background: salmon;
padding: 1rem;
color: #fff;
text-decoration: none;
position: relative;
transition: background .3s;
&:hover{
background: lightsalmon;
}
&::before{
content: "";
width: 6rem;
height: 2rem;
background: skyblue;
position: absolute;
left: -1rem;
top: -1.2rem;
border-radius: 3rem;
pointer-events: none;
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.