jquery mobile custom buttons

Question

I am trying to create a custom button with Jquery Mobile 1.2. My button displays but with the existing custom rounded default button. I need button to display like this. https://i.sstatic.net/vU0J8.png

https://i.sstatic.net/NHgVp.png

#homepage .my-button {
background-image: url('../images/icons/btn_panel.png') !important;
width:307px;
height:50px;
padding-top:0px auto;
}

#homepage  .ui-icon-about-icon {
border-radius:0px;
background-image: url('../images/icons/about_up.png');
background-color: rgba(0, 0, 0, 0);
width:36px;
height: 36px;
}

<div data-role="content" class="content">   
     <a href="about.html" data-transition="fade" data-role="button" data-icon="about-icon" data-iconshadow="false" class="my-button">About</a>
</div>

Taifun · Accepted Answer · 2012-11-06 19:48:44Z

1

that was a good start, just continue manipulating the CSS... I adjusted the height because of the padding, but feed free to play around yourself...

 <style>
  #homepage .my-button {
    background-image: url("btn_panel.png");
    width:307px;
    height:75px;
    padding-top:0px auto;
  }

  #homepage .my-button .ui-btn-inner {
    padding-top: 25px;
  }

  #homepage .my-button .ui-btn-text {
    left: -80px;
  }

  .ui-icon-about-icon {
    border-radius:0px;
    background-image: url("logo36.png");
    background-color: rgba(0, 0, 0, 0);
    width:36px;
    height:36px;
  }
 </style>

to remove the rounded corners just use data-corners="false":

  <a href="about.html" data-transition="fade" data-role="button" data-icon="about-icon" data-iconshadow="false" data-corners="false" class="my-button">About</a>

I played a little bit around and came to this result (I do not have your images, but used another one...) screenshot

you also can use the theme roller to customize your CSS...

answered Nov 6, 2012 at 19:48

Taifun

6,30218 gold badges67 silver badges192 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1205312 Over a year ago

Thanks, For some reaon data-corners="false" did not work for me. Is it available in Jquery Mobile 1.2 because DW did not show it in code hinting. Also is it possible to remove the grey border around the About Icon?

Taifun Over a year ago

For some reaon data-corners="false" did not work for me ??? Is it available in Jquery Mobile 1.2yes of course... take a look at the snippet again... a href=...</a> The grey border is only the background, because I used data-theme="b" in the example... I recommend you to use the theme roller to customize your CSS as already mentioned...

Community · Accepted Answer · 2017-05-23 10:26:53Z

I would look at the docs for buttons:

http://jquerymobile.com/demos/1.2.0/docs/buttons/buttons-options.html

Live Example:

http://jsfiddle.net/Pjvvx/ (Width)
http://jsfiddle.net/3DSGT/ (Height)

JS:

// For all buttons use something like this
$('.ui-btn').css('width','50%');

// For individual buttons use something like this
$('#theButton1').parent().css('width', '75%');

// Or this for HREF data-role buttons
$('#hrefButton4').css('width', '45%');

I think this is what you're looking for

// this changes the height for all buttons
$('.ui-btn-text').css('font-size','50px');

// This changes the height for a single element 
$('#hrefButton3').children().children().css('font-size','30px');

HTML:

<div data-role="page" id="home"> 
    <div data-role="content">
        <input type="button" id="theButton1" value="Press Me 1" />
        <input type="button" id="theButton2" value="Press Me 2" />
        <input type="button" id="theButton3" value="Press Me 3" />
        <input type="button" id="theButton4" value="Press Me 4" />
        <br />
        <a href="#" data-role="button" id="hrefButton1">HREF Me 1</a>
        <a href="#" data-role="button" id="hrefButton2">HREF Me 2</a>
        <a href="#" data-role="button" id="hrefButton3">HREF Me 3</a>
        <a href="#" data-role="button" id="hrefButton4">HREF Me 4</a>
    </div>
</div>

resizing a BUTTON through CSS

Collectives™ on Stack Overflow

jquery mobile custom buttons

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related