如何使用 CSS 转换将加号变成减号？

Question

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>

Answer 1

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>

Answer 2

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>

Answer 3

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

Answer 4

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>