<div class="wrapper"><a class="btn addtocart">
Add to cart <svg width="24" height="24" viewBox="0 0 24 24">
<path d="M17,18C15.89,18 15,18.89 15,20A2,2 0 0,0 17,22A2,2 0 0,0 19,20C19,18.89 18.1,18 17,18M1,2V4H3L6.6,11.59L5.24,14.04C5.09,14.32 5,14.65 5,15A2,2 0 0,0 7,17H19V15H7.42A0.25,0.25 0 0,1 7.17,14.75C7.17,14.7 7.18,14.66 7.2,14.63L8.1,13H15.55C16.3,13 16.96,12.58 17.3,11.97L20.88,5.5C20.95,5.34 21,5.17 21,5A1,1 0 0,0 20,4H5.21L4.27,2M7,18C5.89,18 5,18.89 5,20A2,2 0 0,0 7,22A2,2 0 0,0 9,20C9,18.89 8.1,18 7,18Z"></path>
</svg>
</a></div>.wrapper {
margin: 5em;
}
.btn {
color: black;
padding: 0.5em;
background-color: #ffF000;
margin: 0.5em;
position: relative;
padding-right: 2em;
padding-top: 0.8em
-webkit-box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.33);
-moz-box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.33);
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.33);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
cursor: pointer;
}
.btn svg {
position: absolute;
right: 0.2em;
top: 0.5em;
width: 2em;
}
.btn:hover svg {
transform: scale(2) translate(-1em, 1.5em);
}
.btn:hover {
-webkit-border-radius: 10em;
-moz-border-radius: 10em;
border-radius: 10em;
width: 2em;
}
External CSS
This Pen doesn't use any external CSS resources.