Versions Compared

Old Version 1

changes.mady.by.user Anastasia Cheetham

Saved on

compared with

New Version 2

changes.mady.by.user Anastasia Cheetham

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Section
Column
Code Block
html
html
<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.

Column
Code Block
.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;
}