CTATButton Example

A simple button example.

Click this button:

Click

<div id="button1" class="CTATButton">Click</div>

Simple Image button:

<div id="button2" class="CTATButton">
  <img src="skindata/CTAT-icon.svg">
</div>

Reactive Styled Image button:

Put in style tag in the head or in a referenced .css file:

  #button3>.CTAT-button {
    background-color: transparent;
    background-image: url("skindata/Default-Default.png");
    background-repeat: no-repeat;
    height:66px;
    width:65px;
  }
  #button3>.CTAT-button--hover {
    background-image: url("skindata/Default-Hover.png");
  }
  #button3>.CTAT-button--clicked {
    background-image: url("skindata/Default-Click.png");
  }
  #button3>.CTAT-button:disabled {
    background-image: url("skindata/Default-Disabled.png");
  }

In document body:

<div id="button3" class="CTATButton"></div>