Plus/Minus Toggle

HTML

<div class="circle_plus"></div>

CSS

.circle_plus{width:5.6rem;height:5.6rem;margin:0 auto;cursor:pointer;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;border:solid .5rem #066978;position:relative}
.circle_plus::before,.circle_plus::after{content:'';position:absolute;background-color:#066978;left:50%;top:50%;-webkit-transform:translate(-50%,-50%) rotate(-90deg);-moz-transform:translate(-50%,-50%) rotate(-90deg);-ms-transform:translate(-50%,-50%) rotate(-90deg);-o-transform:translate(-50%,-50%) rotate(-90deg);transform:translate(-50%,-50%) rotate(-90deg);-webkit-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;transition:all .5s ease-in-out}
.circle_plus::before{width:3rem;height:.5rem}
.circle_plus::after{width:.5rem;height:3rem}
.circle_plus.opened::before,.circle_plus.opened::after{-webkit-transform:translate(-50%,-50%) rotate(90deg);-moz-transform:translate(-50%,-50%) rotate(90deg);-ms-transform:translate(-50%,-50%) rotate(90deg);-o-transform:translate(-50%,-50%) rotate(90deg);transform:translate(-50%,-50%) rotate(90deg)}
.circle_plus.opened::before{opacity:0}

SCSS

/* Vars */
$dark:     #066978;

.circle_plus {
	width: 5.6rem;
	height: 5.6rem;
	margin: 0 auto;
	cursor: pointer;
	border-radius: 50%;
	border: solid .5rem $dark;
	position: relative;
	
	&::before, &::after {
		content: '';
		position: absolute;
		background-color: $dark;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%)rotate(-90deg);
		transition: all 0.5s ease-in-out;
	}
	
	&::before {
		width: 3rem;
		height: .5rem;
	}
	
	&::after {
		width: .5rem;
		height: 3rem;
	}
	
	&.opened {
		&::before, &::after {
			transform: translate(-50%, -50%)rotate(90deg);
		}
		
		&::before {
			opacity: 0;
		}
	}
}

JavaScript

$('.circle_plus').on('click', function(){
	$(this).toggleClass('opened');
});