Question

I have a button, by default it adds the class ui-btn-corner-all. How can I tell it not to use that, as I just want square edges or force another style on there I’ve created?

<div data-role="content" data-theme="home">

    <a href="index.html" data-role="button" data-icon="arrow-r">Content</a> 

</div>

Answer 1

Live Example:

• http://jsfiddle.net/SCw8e/3/

HTML:

<div data-role="page" id="jqm-home" class="type-home"> 
    <div data-role="content">
        <a href="index.html" data-role="button" data-icon="arrow-r">Button w/ jQM Style</a>
        <a href="index.html" data-role="button" data-icon="arrow-r" id="default-button-style-1">Button wo/ rounded corners jQM Style</a>    
        <a href="index.html" data-role="button" data-icon="arrow-r" id="default-button-style-2">Button wo/ icon jQM Style</a> 
        <a href="index.html" data-role="button" data-icon="arrow-r" id="default-button-style-3">Button wo/ icon/rounded corners jQM Style</a>  
    </div>
</div>

JS:

$('#default-button-style-1').removeClass('ui-btn-corner-all');
$('#default-button-style-2').removeClass('ui-btn-icon-left');
$('#default-button-style-3').removeClass('ui-btn-icon-left ui-btn-corner-all');