Here’s a simple pure CSS, plus to minus icon transition. The code is a mixin in SCSS, and currently transitions on :hover
, but the :hover
can be changed to a class like .is-minus
.
Here’s the codepen as well: https://codepen.io/anon/pen/JNywpQ
@mixin plusMinus($width, $lineWidth, $color) { box-sizing: border-box; transition: transform 0.3s; width: $width; height: $width; transform: rotate(180deg); position: relative; &:hover { transform: rotate(0deg); } &::before { content: ''; display: block; width: $width; height:0px; border-bottom: solid $lineWidth $color; position: absolute; bottom:$width /2 - $lineWidth/2; transform: rotate(90deg); transition: width 0.3s; } &:hover::before { content: ''; display: block; width: 0px; height:0px; border-bottom: solid $lineWidth $color; position: absolute; bottom:$width /2 - $lineWidth/2; transform: rotate(90deg); } &::after { content: ''; display: block; width: $width; height:0px; border-bottom: solid $lineWidth $color; position: absolute; bottom:$width /2 - $lineWidth/2; } } .icon { @include plusMinus(24px, 2px, #a1a1a1); }