.selector
{
  /* the common selector */
}

.control
{
  display: inline-block;

  box-sizing: border-box;
  margin: 0;

  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  text-align: center;
  white-space: nowrap;
  text-decoration: none;

  border-radius: 3px;
  outline: none;

  -webkit-tap-highlight-color: transparent;
}

.control::-moz-focus-inner
{
  margin: 0;
  padding: 0;

  border: 0;
}

/* action */

@-webkit-keyframes flicker
{
  from,
  to
  {
    background-color: #fc0;
  }

  40%,
  60%
  {
    background-color: #ffe066;
  }
}

@keyframes flicker
{
  from,
  to
  {
    background-color: #fc0;
  }

  40%,
  60%
  {
    background-color: #ffe066;
  }
}

.action
{
  composes: control;

  transition: background .1s ease-out;

  color: black;
  border: 1px solid #ffdb4d;
  background: #ffdb4d;
}

.action:hover
{
  border: 1px solid #ffd633;
  background: #ffd633;
}

.action:focus
{
  -webkit-animation: flicker 1s infinite linear;
          animation: flicker 1s infinite linear;
}

.action:active
{
  background: #fc0;
}

/* normal */

.normal
{
  composes: control;

  transition: border .1s ease-out,box-shadow .1s ease-out;

  color: black;
  border: 1px solid #ccc;
  background: white;
}

.normal:hover
{
  border: 1px solid #b3b3b3;
}

.normal:focus
{
  border: 1px solid #ffdb4d;
  box-shadow: inset 0 0 0 1px #ffdb4d;
}

.normal:active
{
  background: #f6f5f3;
}

.control:disabled,
.control.disabled
{
  cursor: default;

  color: rgba(0,0,0,.5);
  border: 1px solid #ebebeb;
  background: #ebebeb;
}