我想创建一个切换按钮,使其形状从加号变成减号。
使用纯 CSS 实现,不使用伪元素。
我希望实现的效果是将“+”符号中的竖线缩小为水平线。
我知道这是可能的,但我不确定采取哪种最佳路线。我考虑使用
使用纯 CSS 实现,不使用伪元素。
我希望实现的效果是将“+”符号中的竖线缩小为水平线。
我知道这是可能的,但我不确定采取哪种最佳路线。我考虑使用
height
实现,但我担心浏览器的 line-height
会改变其在元素中的位置。
$('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>