Most websited design custom styles for buttons these days. Background images and CSS can be used to create many attractive button styles, from simple rectangles to glossy, 3D-looking shapes.
When designing high-contrast versions of these buttons, it is best to avoid gradients, 3D effects, etc. It is sometimes simplest to set a solid colour background for images. The example below shows how this can be done.
<button class="search-btn">Search</button>
In this example, a button is given a nice gradient background with a two-tone border to give it a bit of a 3D effect.
The CSS for the high-contrast version (in this example, the "white-on-black") simply inverts the basic colour scheme to produce a 'button' effect, removing the gradient and forcing the background and border colours to conform to the theme colours.
.oer-search-btn { background: -moz-linear-gradient(center top , #468CAA, #135876) repeat scroll 0 0 transparent; background: -webkit-gradient(linear, left top, left bottom, from(#468caa), to(#135876)); /* for webkit browsers */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#468caa', endColorstr='#135876'); /* for IE */ border: medium none; box-shadow: 1px 1px 0 #135876 inset, 1px 1px 0 #FFFFFF; color: #FFFFFF; } .fl-theme-wb .oer-search-btn { background-color: #FFFFFF !important; border-color: #000000 !important; color: #000000 !important; }