6

I want to create a toggle button that morphs its shape from a plus sign to a minus sign.

Using CSS only, without the use of pseudo-elements.

My desired effect is to have the vertical line in the "+" sign to shrink into the horizontal line.

I know it's possible but I'm not sure which is the best route to take. I was thinking of doing something with the height but I'm worried about the line-height of browsers changing its position in the element.

$('button').on("click", function(){
  $(this).toggleClass('active');
});
button {
color: #ecf0f1;
background:  #e74c3c;
  width: 50px;
  height: 50px;
  border: 0;
  font-size: 1.5em;
  }
button span {
  transition: all .75s ease-in-out;
  }
button.active span {
  /* Code to morph + to - */
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button><span>+</span></button>

4 Answers 4

25

Because of the simplicity of the shapes, the easiest way is just to make the + and - with elements. Using pseudo elements would be the cleanest solution, but you can also just use a DOM element and have a slightly messier document structure.

With that in mind, the actual solution is straightforward. We use CSS to position elements to resemble the desired characters, and then "morph" between them by animating that position.

Take a look over the following code, and try to understand what each rule is accomplishing.

button {
  color: #ecf0f1;
  background: #e74c3c;
  width: 50px;
  height: 50px;
  border: 0;
  font-size: 1.5em;
  position: relative;
}

button span {
  position: absolute;
  transition: 300ms;
  background: white;
  border-radius: 2px;
}

/* Create the "+" shape by positioning the spans absolutely */
button span:first-child {
  top: 25%;
  bottom: 25%;
  width: 10%;
  left: 45%;
}

button span:last-child {
  left: 25%;
  right: 25%;
  height: 10%;
  top: 45%;
}

/* Morph the shape when the button is hovered over */
button:hover span {
  transform: rotate(90deg);
}

button:hover span:last-child {
  left: 50%;
  right: 50%;
}
<button>
  <span></span>
  <span></span>
</button>

2
  • yup the easiest but OP doesn't want pseudo elements :/
    – dippas
    Jul 1, 2016 at 3:14
  • @dippas I'll update the answer, but it is still the same concept.
    – Jacob G
    Jul 1, 2016 at 3:15
17

Note : please stop editing the question making the answers incorrect

CSS solution

$('button').on("click", function(){
  $(this).toggleClass('active');
});
button {
  color: #ecf0f1;
  background: #e74c3c;
  width: 70px;
  height: 70px;
  position: relative;
  font-size: 50px;
  cursor: pointer;
  border: 0;
  outline: 0;
  padding: 0
}
.plus,
.minus {
  color: #fff;
  padding: 10px;
  width: 70px;
  height: 70px;
  line-height: 50px;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  box-sizing: border-box;
  transition: .5s all ease-out;
}
.plus {
  opacity: 1;
  transform: rotate(0deg);
}
button.active .plus {
  opacity: 0;
  transform: rotate(90deg);
}
.minus {
  opacity: 0;
  transform: rotate(-90deg);
}
button.active .minus {
  opacity: 1;
  transform: rotate(0deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<button>
  <span class="plus"><i class="fa fa-plus"></i></span>
  <span class="minus"><i class="fa fa-minus"></i></span>
</button>

A (old) CSS solution:

Using pseudo element ::before with content property

$('button').on("click", function() {
  $(this).toggleClass('active');
});
button {
  color: #ecf0f1;
  background: #e74c3c;
  width: 50px;
  height: 50px;
  border: 0;
  font-size: 1.5em;
}
button span {
  transition: all .75s ease-in-out;
  position:relative
}
button span::before {
  content:"+"
}
button.active span::before {
  content:"-"
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button><span></span></button>

A (old) jquery Solution:

no need for span, you can do this using text() with a if statement in jquery

$('button').on("click", function() {
  $(this).toggleClass('active');
  $(this).text() == "+" ? $(this).text("-") : $(this).text("+");
});
button {
  color: #ecf0f1;
  background: #e74c3c;
  width: 50px;
  height: 50px;
  border: 0;
  font-size: 1.5em;
  transition: all .75s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>+</button>

6
  • I want it to morph, not just change. Thanks!
    – yaserso
    Jul 1, 2016 at 2:47
  • just FYI I added a CSS only solution, what you mean by morph?
    – dippas
    Jul 1, 2016 at 2:49
  • 3
    please stop editing the question making the answers incorrect
    – dippas
    Jul 1, 2016 at 2:50
  • I don't know how to explain it better. I already mentioned it in the description of my question. I want the vertical line in the plus sign to shrink until it disappears, and it becomes a minus sign.
    – yaserso
    Jul 1, 2016 at 2:50
  • 2
    Elegant solution +1
    – Ahmad Alfy
    Jul 1, 2016 at 3:04
2

Ah my bad I've overlooked that OP doesn't want to use any pseudo elements. But the big advantage with pseudo elements would be that you have less HTML Code and a cleaner structure.

It's also a different morphing animation as OP wants but maybe someone else can use this.

So if you don't mind I'll let my suggestion there.

Maybe something like this?

HTML

<div class="button"></div>

CSS

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: #343838;
}

.button {
  position: absolute;
  width: 55px;
  height: 55px;
  background: #70975B;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  border-radius: 50%;
  cursor: pointer;
  z-index: 100;
  transition: 0.4s cubic-bezier(0.2, 0.6, 0.3, 1.1);
}

.button:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 2px;
  width: 50%;
  background: white;
}

.button:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 50%;
  width: 2px;
  background: white;
}

.button.clicked {
  transform: translate(-50%, -50%) rotate(360deg);
  background: #CC2A41;
}

.button.clicked:before {
  width: 0;
}

jQuery

$(".button").click(function() {
  $(this).toggleClass("clicked");
});

And here a working example http://codepen.io/svelts/pen/LkyZoZ

0

try this

$('button').on("click", function() {
  var $this = $(this);
  $this.toggleClass('toggle');
  if ($this.hasClass('toggle')) {
    $this.text('+');
  } else {
    $this.text('-');
  }
});
button {
  color: #ecf0f1;
  background: #e74c3c;
  width: 50px;
  height: 50px;
  border: 0;
  font-size: 1.5em;
  transition: all .75s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="toggle">+</button>

1
  • I want it to morph, not just change. Thanks!
    – yaserso
    Jul 1, 2016 at 2:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.