Forum | Appery.io

hi,
I'd like to know how to customize the style of a button with css. I've followed the tutorial on http://docs.appery.io/documentation/w... where just the button text is changed.

I want to change the appearence of the button completely so I've assigned my button the .my-btn class on the UI interface. I've created this class on a new css document and included this code:

.my-btn {
border-radius: 5px !important;
border-color: blue !important;
width: 50px !important;
height: 50px !important;
background-color: red !important;
border-width: 5px !important;
border-style: solid !important;
font-weight:bold !important;
font-size:24px !important;
}

However the button is not getting this style and when I inspect the object with chrom it still has the default classes plus the class I've created:

a class="my-btn ui-btn ui-shadow ui-btn-corner-all ui-fullsize ui-btn-hover-a ui-btn-up-a" name="mobilebutton_10" rel="nofollow"span class="ui-btn-inner"span class="ui-btn-text"
Button
/span/span/a

What do I need to modify so the rest of the classes do not affect my custom button?

Thanks a lot Miguel

''a class="my-btn ui-btn ui-shadow ui-btn-corner-all ui-fullsize ui-btn-hover-a ui-btn-up-a" name="mobilebutton_10" rel="nofollow"span class="ui-btn-inner"span class="ui-btn-text"
Button
/span/span/a''

Seem like I can't copy paste the HTML code for the button as I see it in Chrome

a data-role="button" name="mobilebutton_10" dsid="mobilebutton_10" class="my-btn ui-btn ui-shadow ui-btn-corner-all ui-fullsize ui-btn-hover-a ui-btn-up-a" id="startScreen_mobilebutton_10" data-corners="true" data-mini="false" data-theme="a" tabindex="3" data-shadow="true" data-iconshadow="true" data-wrapperels="span"

I guess the proble is that the style is being inheritated by the data-role="button" property of jquerymobile. So I guess I'd need to change this. How and where could I do it?

Thanks for your help.

Ok I've just found the solutions with:

[name="mobilebutton_10"] {
border-radius: 5px !important;
border-color: blue !important;
width: 50px !important;
height: 50px !important;
background-color: red !important;
border-width: 5px !important;
border-style: solid !important;
font-weight:bold !important;
font-size:24px !important;
}

Thanks a lot

Hello! Ok, thank you for update!