Skip to content

Instantly share code, notes, and snippets.

@justjohn
Created July 1, 2011 04:03
Show Gist options
  • Save justjohn/1057852 to your computer and use it in GitHub Desktop.
Save justjohn/1057852 to your computer and use it in GitHub Desktop.
Red button CSS for JQuery Mobile
/* Red button theme for JQuery Mobile
* - Use data-theme="r" for red versions of the default JQuery Mobile Buttons.
******************************************************************************************/
.ui-btn-up-r {
border: 1px solid #721414;
background: #AB2525;
font-weight: bold;
color: #fff;
text-shadow: 0 -1px 1px #000;
background-image: -moz-linear-gradient(top, #C54E4E, #AB2525);
background-image: -webkit-gradient(linear,left top,left bottom,
color-stop(0, #C54E4E),
color-stop(1, #AB2525));
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#C54E4E', EndColorStr='#AB2525')";
}
.ui-btn-up-r a.ui-link-inherit {
color: #fff;
}
.ui-btn-hover-r {
border: 1px solid #6E0000;
background: #B64B4B;
font-weight: bold;
color: #fff;
text-shadow: 0 -1px 1px #000;
background-image: -moz-linear-gradient(top,
#D47272,
#B64B4B);
background-image: -webkit-gradient(linear,left top,left bottom,
color-stop(0, #D47272),
color-stop(1, #B64B4B));
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#D47272', EndColorStr='#B64B4B')";
}
.ui-btn-hover-r a.ui-link-inherit {
color: #fff;
}
.ui-btn-down-r {
border: 1px solid #772222;
background: #C54E4E;
font-weight: bold;
color: #fff;
text-shadow: 0 -1px 1px #000;
background-image: -moz-linear-gradient(top, #9E3939, #C54E4E);
background-image: -webkit-gradient(linear,left top,left bottom,
color-stop(0, #9E3939),
color-stop(1, #C54E4E));
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#9E3939', EndColorStr='#C54E4E')";
}
.ui-btn-down-r a.ui-link-inherit {
color: #fff;
}
.ui-btn-up-r,
.ui-btn-hover-r,
.ui-btn-down-r {
font-family: Helvetica, Arial, sans-serif;
text-decoration: none;
}
@gfilomena
Copy link

Thanks

@ajsleal
Copy link

ajsleal commented Jun 23, 2013

GREAT JOB...
But could you make a GREEN version? I wanna use RED (cancel) GREEN (ok)... inside of my normal theme.
Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment