Question

I used the solution to this question in my project to change the icon of a button when the user clicks on it:

 $('#buttonSwitch').buttonMarkup({icon: "minus"});

However, not only the icon but also the shape of the button changes (the rounded corners):

Before the click:

After the click:

You can find a minimal example here: -removed-

I would like to know how I can just change the icon without changing the shape of the button.
Thanks in advance for your help.

Edit: There is still one little problem. After the click, the button has this small white border on the bottom:

Answer 1

It’s because you have custom CSS (border-radius) on your button. And the buttonMarkup function sets the border-radius to default. So, you have to store the current border-radius, change the button, and restore the border-radius.

Modify your JS function to:

function switchIcon() {
    iconSwitched = !iconSwitched;

    /* Store the objects */
    var button = $('#buttonSwitch');
    var parent = button.parent();
    var sibling = button.siblings().filter('span').first();

    /* Store the border-radius */
    var br = button.css('border-radius');
    var pr = parent.css('border-radius');
    var sr = sibling.css('border-radius');

    if (iconSwitched)
        button.buttonMarkup({icon: "minus"});
    else
        button.buttonMarkup({icon: "add"});

    /* Now, the border-radius has been set using the buttonMarkup function
     * We need to restore it to our custom border-radius to get our custom radius back.
     * Note that you may want to also set -webkit-border-radius 
     * and -moz-border-radius as well
     */
    button.css('border-radius', br);
    parent.css('border-radius', pr);
    sibling.css('border-radius', sr);

    /* Get rid of box shadow too */
    parent.css('box-shadow', 'none');
};