CTAT: Cognitive Tutor Authoring Tools

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>