Read about Stick to Top

Styling Buttons

This is achieved via

  1. select Website >> Style Settings
  2. search for the button you want e.g. button1
  3. amend the CSS text for each.

The following CSS text will create a top background colour of CYAN (#0000FF) and a bottom background colour of BLUE (#FFFF00). If you edit BUTTON1.MAIN.CSS, BUTTON1.ACTIVE.CSS and BUTTON1.HOVER.CSS and insert the text below (replacing #0000FF and #FFFF00 with whatever shades you require) then you'll get the buttons you want.

BUTTONx.MAIN.CSS

-moz-box-shadow:inset 0px 1px 0px 0px #54a3f7;

-webkit-box-shadow:inset 0px 1px 0px 0px #54a3f7;

box-shadow:inset 0px 1px 0px 0px #54a3f7;

background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #00FFFF), color-stop(1, #0000FF));

background:-moz-linear-gradient(top, #00FFFF 5%, #0000FF 100%);

background:-webkit-linear-gradient(top, #00FFFF 5%, #0000FF 100%);

background:-o-linear-gradient(top, #00FFFF 5%, #0000FF 100%);

background:-ms-linear-gradient(top, #00FFFF 5%, #0000FF 100%);

background:linear-gradient(to bottom, #00FFFF 5%, #0000FF 100%);

background-color:#00FFFF;

-moz-border-radius:3px;

-webkit-border-radius:3px;

border-radius:3px;

border:1px solid #124d77;

display:inline-block;

cursor:pointer;

color:#FFFFFF;

padding:0.4em 0.8em;

font-size:0.9em;

margin-right:1em;

margin-bottom:1em;

text-decoration:none;

text-shadow:0px 1px 0px #154682;
BUTTONx.ACTIVE.CSS position:relative;
top:1px;
BUTTONx.HOVER.CSS

background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0000FF), color-stop(1, #00FFFF));

background:-moz-linear-gradient(top, #0000FF 5%, #00FFFF 100%);

background:-webkit-linear-gradient(top, #0000FF 5%, #00FFFF 100%);

background:-o-linear-gradient(top, #0000FF 5%, #00FFFF 100%);

background:-ms-linear-gradient(top, #0000FF 5%, #00FFFF 100%);

background:linear-gradient(to bottom, #0000FF 5%, #00FFFF 100%);

background-color:#0000FF;

color:#FFFFF;

 

Read about Stick to Top

About Buttons