Wed Aug 03 2022
Custom Cart Button
CSS5466 views
File Name: custom-cart-button.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Cart Button</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #fbfbfb;
}
section {
width: 100%;
height: 100vh;
margin-top: 30px;
display: flex;
justify-content: center;
align-items: center;
}
a {
position: relative;
}
a::before {
position: absolute;
content: attr(data-item);
width: 30px;
height: 30px;
background-color: #ff3300;
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
font-weight: bold;
border-radius: 100%;
color: #fff;
right: 22%;
top: 4px;
z-index: -1;
transition: 0.2s all cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
a:hover:before {
transform: scale(1.2);
top: -1px;
z-index: 0;
}
a svg {
width: 80px;
height: 80px;
}
a svg path {
fill: #292929;
}
</style>
</head>
<body>
<section>
<a href="" data-item="99">
<svg viewBox="0 0 32 32" ><g data-name="Layer 2" id="Layer_2"><path d="M24.33,23H13.53a3,3,0,0,1-2.9-2.21L8,11.26a1,1,0,0,1,.17-.87A1,1,0,0,1,9,10H28a1,1,0,0,1,.77.36,1,1,0,0,1,.21.82l-1.7,9.36A3,3,0,0,1,24.33,23Zm-14-11,2.25,8.26a1,1,0,0,0,1,.74h10.8a1,1,0,0,0,1-.82L26.8,12Z"/><path d="M9,12a1,1,0,0,1-1-.73L6.45,5.73a1,1,0,0,0-1-.73H4A1,1,0,0,1,4,3H5.49A3,3,0,0,1,8.38,5.18L10,10.73A1,1,0,0,1,9.27,12,.84.84,0,0,1,9,12Z"/><path d="M16,29a2,2,0,1,1,2-2A2,2,0,0,1,16,29Zm0-2h0Zm0,0h0Zm0,0h0Zm0,0h0Zm0,0h0Zm0,0h0Zm0,0h0Zm0,0h0Z"/><path d="M22,29a2,2,0,1,1,2-2A2,2,0,0,1,22,29Zm0-2Z"/><path d="M22,17H16a1,1,0,0,1,0-2h6a1,1,0,0,1,0,2Z"/></g><g id="frame"><rect fill="none" height="32" width="32"/></g></svg>
</a>
</section>
</body>
</html>
Result Screenshot(s)
Author:Geekboots