CTATImageButton Example

A simple image button example.

Click this button:

<div id="button1" class="CTATImageButton"
  style="width: 66px; height: 66px;"
  data-ctat-image-hover="skindata/Default-Hover.png"
  data-ctat-image-clicked="skindata/Default-Click.png"
  data-ctat-image-default="skindata/Default-Default.png"
  data-ctat-image-disabled="skindata/Default-Disabled.png">
</div>

Simple Clickable button:

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

CTAT-like button:

✔

Wow

In style tag or css:

  #button3 {
    display:flex;
    flex-direction:column;
    border:1px solid black;
    border-radius:5px;
    justify-content:space-around;
    align-items:center;
    width:66px;
    height:66px;
    background-color: blue;
  }
  #button3.CTAT-button--hover {
    background-color: darkblue;
    border: 1px solid black;
  }
  #button3.CTAT-button--clicked {
    background-color: skyblue;
    border: 1px solid blue;
  }
  #button3:disabled {
    background-color: #EDEDED;
    border: 1px solid darkgrey;
    text-color: #9A9A9A;
    cursor: default;
  }

In page:

<div id="button3" class="CTATImageButton">
  <div style="font-size:36px;pointer-events:none;">✔</div>
  <div style="pointer-events:none;">Wow</div>
</div>