<a href="#" class="just">Book 1:1 Coaching Call</a>
:root {
--color1: #544e4e;
--color2: #f1f1f1;
--color3: #fffdef;
--hcolor: #332a4f;
--bgcolor-1: #faf2ff;
--butshadow: #a093ca;
}
.just {
display: flex;
background: url(https://assets.website-files.com/60d0b9d684d42a0424dfb8c5/60d0ba000e4b763ca38903e4_btn_arrow.svg)
no-repeat;
background-position: right 40px top 50%;
background-color: var(--bgcolor-1);
padding: 10px 70px 10px 40px;
text-transform: uppercase;
text-decoration: none;
font-size: 1.3rem;
margin-right: auto;
border: 1px solid var(--hcolor);
border-radius: 50px;
box-shadow: 4px 4px var(--butshadow), 5px 5px var(--hcolor);
transition: 0.5s;
}
.just:hover {
box-shadow: 6px 6px var(--butshadow), 7px 7px var(--hcolor);
background-position: right 10px top 50%;
padding: 10px 70px 10px 10px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.