<div class="wrapper">
<div class="count">
<button class="minus">-</button>
<div class="num"></div>
<button class="add">+</button>
</div>
<div class="navbar">
<a class="icon-search"></a>
<a class="icon-categories"></a>
<a class="icon-bag"></a>
<a class="icon-profile"></a>
</div>
</div>
*,
*:after,
*:before {
box-sizing: border-box;
}
body {
background: #F5F5F5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
// Font
@font-face {
font-family: 'icons';
src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/137355/icons.eot');
src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/137355/icons.eot#iefix') format('embedded-opentype'),
url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/137355/icons.ttf') format('truetype'),
url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/137355/icons.woff') format('woff'),
url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/137355/icons.svg#icons') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
[class^="icon-"]:before, {
font-family: 'icons' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-search:before { content: "\e900"; }
.icon-profile:before { content: "\e901"; }
.icon-categories:before { content: "\e902"; }
.icon-basket:before { content: "\e903"; }
.icon-bag:before { content: "\e904"; }
.icon-cart:before { content: "\e905"; }
.icon-rectangle:before { content: "\e906"; }
.navbar {
display: flex;
background: #fff;
padding: 10px 35px;
border-radius: 0 0 25px 25px;
box-shadow: 0 2px 20px -5px rgba(black, .1);
> a {
position: relative;
width: 48px;
height: 48px;
display: flex;
justify-content: center;
align-items: center;
&:before {
font-size: 25px;
color: #ccc;
}
&:not(:last-child) {
margin-right: 15px;
}
}
.icon-bag {
&:before {
color: #000;
}
&.no-empty:after {
content: "";
background: #7BDED1;
width: 8px;
height: 8px;
border-radius: 50%;
color: #fff;
position: absolute;
left: 50%;
transform: translate(-50%);
top: 0;
}
&.basket:before {
content: "\e906";
font-size: 25px;
margin-top: 4px;
}
&.cart:before {
content: "\e905";
}
}
}
.count {
display: flex;
justify-content: center;
align-items: center;
padding: 30px 0;
font-size: 20px;
.minus,
.add {
width: 40px;
height: 40px;
//background: #7BDED1;
border: 2px solid #7BDED1;
background: rgba(#fff, .9);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
color: #7BDED1;
font-weight: bold;
&:focus {
outline: none;
}
}
.num {
padding: 0 20px;
font-size: 18px;
}
}
.scale:before { animation: scale .5s ease-out; }
.scale-basket:before { animation: scale-basket .5s ease-out; }
.scale-cart:before { animation: scale-cart .5s ease-out; }
@keyframes scale {
0% {transform: scale(0)}
80% {transform: scale(1.2)}
100% {transform: scale(1)}
}
@keyframes scale-basket {
0% {transform: scale(0)}
80% {transform: scale(1.2)}
100% {transform: scale(1)}
}
@keyframes scale-cart {
0% {transform: scale(0)}
80% {transform: scale(1.2)}
100% {transform: scale(1)}
}
View Compiled
$(document).ready(function() {
var num=0;
$(".minus").click(function() {
num=num-1;
$(".num").text(num);
check();
});
$(".add").click(function() {
num=num+1;
$(".num").text(num);
check();
});
function check() {
if (num < 1) {
$(".icon-bag").removeClass("no-empty scale");
} else if (num > 0 && num < 4) {
$(".icon-bag").removeClass("cart basket scale scale-cart scale-basket");
$(".icon-bag").addClass(" scale no-empty");
} else if (num > 3 && num < 6) {
$(".icon-bag").removeClass("cart scale scale-cart");
$(".icon-bag").addClass("basket scale-basket");
} else if (num > 6) {
$(".icon-bag").removeClass("basket scale-bag scale");
$(".icon-bag").addClass("cart scale-cart");
}
}
check();
$(".num").text(num);
});
This Pen doesn't use any external CSS resources.