<div class="frame">
  <div class="center">
		<div class="wrapper">
			<div id="minus" onclick="count('minus')"><span></span></div>
			<div id="number"><span id="number-input"></span></div>
			<div id="plus" onclick="count('plus')"><span></span></div>
		</div>
  </div>
</div>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);

@color-first: #d25a2a;
@color-second: #fdaf3a;
@color-wrapper: #eeeeee;
@color-green: #8ed273;
@color-red: #e26e6e;

// use only the available space inside the 400x400 frame
.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
	box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.1);
	overflow: hidden;
  background: @color-first;background: linear-gradient(to top right, #D2592A 0%, #FDB03A 100%);
	background: linear-gradient(to top right, @color-first, @color-second);
  color: #555555;
	font-family: 'Open Sans', Helvetica, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
	width: 140px;
	height: 40px;
	border-radius: 40px;
	background-color: @color-wrapper;
}

div#plus {
	position: absolute;
	right: 5px; top: 50%;
	transform: translateY(-50%);
	width: 35px; height: 35px;
	background-color: none;
	border-radius: 50%;
	cursor: pointer;
	span {
		position: absolute;
		left: 50%; top: 50%;
		transform: translate(-50%, -50%);
		margin: 0; padding: 0;
		&::after {
			content: "";
			position: absolute;
			left: 50%; top: 50%;
			transform: translate(-50%, -50%);
			width: 20px; height: 3px;
			background-color: @color-green;
		}
		&::before {
			content: "";
			position: absolute;
			left: 50%; top: 50%;
			transform: translate(-50%, -50%);
			width: 3px; height: 20px;
			background-color: @color-green;
		}
	}
	&:hover {
		background-color: @color-green;
		transition: 0.5s;
		span {
			&::after {
				background-color: @color-wrapper;
			}
			&::before {
				background-color: @color-wrapper;
			}
		}
	}
}
div#number {
	position: absolute;
	left: 50%; top: 50%;
	transform: translate(-50%, -50%);
	span {
		position: absolute;
		left: 50%; top: 50%;
		transform: translate(-50%, -50%);
		font-size: 22px;
		font-weight: 700;
		margin: 0; padding: 0;
	}
}
div#minus {
	position: absolute;
	left: 5px; top: 50%;
	transform: translateY(-50%);
	width: 35px; height: 35px;
	background-color: none;
	border-radius: 50%;
	cursor: pointer;
	span {
		position: absolute;
		left: 50%; top: 50%;
		transform: translate(-50%, -50%);
		margin: 0; padding: 0;
		&::after {
			content: "";
			position: absolute;
			left: 50%; top: 50%;
			transform: translate(-50%, -50%);
			width: 20px; height: 3px;
			background-color: @color-red;
		}
	}
	&:hover {
		background-color: @color-red;
		transition: 0.5s;
		span {
			&::after {
				background-color: @color-wrapper;
			}
		}
	}
}

.animate-plus {
	animation: a-plus 0.2s linear;
}

.animate-minus {
	animation: a-minus 0.2s linear;
}

@keyframes a-plus {
	0% {
		font-size: 22px;
	}
	50% {
		font-size: 28px;
	}
	100% {
		font-size: 22px;
	}
}

@keyframes a-minus {
	0% {
		font-size: 22px;
	}
	50% {
		font-size: 16px;
	}
	100% {
		font-size: 22px;
	}
}
// jQuery v3.3.1 is supported
var actual = 0;
var input = document.getElementById("number-input");
input.innerHTML = actual;

function count(direction) {
	if(direction === "minus") {
		actual = actual - 1;
		input.classList.remove('animate-minus');
		input.classList.remove('animate-plus');
		setTimeout(function(){
				input.classList.add('animate-minus');
		},10);
	} else {
		actual = actual + 1;
		input.classList.remove('animate-plus');
		input.classList.remove('animate-minus');
		setTimeout(function(){
			input.classList.add('animate-plus');
		},10);
	}
	setTimeout(function(){
		input.innerHTML = actual;
	},5);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://100dayscss.com/codepen/js/jquery.min.js