How to get "old-style" rounded 3d buttons in newer jQuery Mobile 1.4+

Question

Well, basicly i'm trying to make this button

<a href="#" class="ui-btn ui-icon-check ui-btn-icon-right ui-btn-corner-all ui-shadow"> button </a>

Look like this: http://jsfiddle.net/waYg8/2/

But I'm missing a few classes, especially the glare-cut-out looking style. Any ideas?

UPDATE: Trying to add own class, but looks 2d ugly... http://jsfiddle.net/2qt9w/

.btn_round
{
-moz-box-shadow: 0px 1px 0 rgba(255,255,255,0.3);
-webkit-box-shadow: 0px 1px 0 rgba(255,255,255,0.3);
box-shadow: 0px 1px 0 rgba(255,255,255,0.3);

-moz-border-radius:             1.5em !important;
-webkit-border-radius:          1.5em !important;
border-radius:                  1.5em !important;
}

In old jquery mobile, the button looked like in the fiddle. But in newer version they are square and ugly. So I need to make this with css — Baked Inhalf, Apr 17 '14 at 09:28
@Aravinth, in other words. How to create a button like in the fiddle using css... — Baked Inhalf, Apr 17 '14 at 09:30
@Aravinth That's exaclty how it looks today. Square buttons :( — Baked Inhalf, Apr 17 '14 at 10:48
`.ui-header .ui-btn { border-radius: 10px; }` should work for you. — Omar, Apr 17 '14 at 11:02

score 1 · Answer 1 · answered Apr 17 '14 at 13:48

It is hard to get the exact look because jQM 1.4 no longer adds all the inner spans within the button, but this should get you close:

.btn_round
{
    -moz-box-shadow: 0px 1px 0 rgba(255,255,255,0.3);
    -webkit-box-shadow: 0px 1px 0 rgba(255,255,255,0.3);
    box-shadow: 0px 1px 0 rgba(255,255,255,0.3);

    -moz-border-radius:             1.5em !important;
    -webkit-border-radius:          1.5em !important;
    border-radius:                  1.5em !important;
    background-image: linear-gradient(rgb(68, 68, 68), rgb(45, 45, 45));
    background-origin: padding-box;
    background-size: auto;
    border-color: rgb(17, 17, 17);
    box-shadow: rgba(255, 255, 255, 0.298039) 0px 1px 0px 0px;
    text-shadow: rgb(17, 17, 17) 0px 1px 1px;   
}
.btn_round:after{
    -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0px 1px 0px 0px;
    box-shadow: rgba(255, 255, 255, 0.4) 0px 1px 0px 0px;
}

Updated FIDDLE

How to get "old-style" rounded 3d buttons in newer jQuery Mobile 1.4+

1 Answers1

Linked