How to get "old fashioned" rounded 3d buttons in the new jQuery Mobile 1.4+
Well, basically I am 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>
Take a look: http://jsfiddle.net/waYg8/2/
But I miss a few classes, especially face to face. Any ideas?
UPDATE: Attempting to add a custom 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;
}
0
source to share
1 answer
It's hard to get an exact look because jQM 1.4 no longer adds all the inner spacing inside the button, but that should close you:
.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
+1
source to share