Animated plus/minus indicators

Simple transition from blank to minus or plus.

by Travis Almand

HTML

<button id="blank">blank</button>
<button id="minus">minus</button>
<button id="plus">plus</button>

<div class="sign"></div>

CSS

html,
body {
  margin: 0;
  padding: 0;
}

.sign {
  border: 2px solid gainsboro;
  border-radius: 50%;
  height: 20px;
  margin: 20px;
  position: relative;
  width: 20px;
}
.sign:before,
.sign:after {
  background-color: white;
  content: '';
  display: block;
  height: 4px;
  left: 50%;
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translate3d(-50%, -50%, 0) rotate(-90deg);
  transition: all 0.5s;
  width: 12px;
}
.sign.minus:before {
  background-color: red;
  opacity: 1;
  transform: translate3d(-50%, -50%, 0) rotate(0deg);
}
.sign.plus:before {
  background-color: green;
  opacity: 1;
  transform: translate3d(-50%, -50%, 0) rotate(0deg);
}
.sign.plus:after {
  background-color: green;
  opacity: 1;
  transform: translate3d(-50%, -50%, 0) rotate(90deg);
}

JavaScript

console.clear();

var $blank = document.querySelector('#blank');
var $minus = document.querySelector('#minus');
var $plus = document.querySelector('#plus');
var $btns = document.querySelectorAll('button');
var $signs = document.querySelectorAll('.sign');

for (var i = 0; i < $btns.length; i++) {
	$btns[i].addEventListener('click', changeSigns);
}

function changeSigns(e) {
	var type = e.target.id;
  
  for (var i = 0; i < $btns.length; i++) {
  	$signs[i].classList = 'sign';
    
  	if (type !== 'blank') {
	  	$signs[i].classList.add(type);
    }
  }
}