Button Test

Github
Button
A button's border and background color are not specified.
        
<a class="Button
          u-letter-spacing-1x
          u-on-hover-background-color-555
          u-text-color-sf-tomato-red
          u-font-open-sans
          u-font-weight-300
          u-font-size-500">booyakasha
</a>
Both the border and the background is transparent.
booyakasha
Button
A button's focus, hover, or active state is triggered. 
        
<a class="Button
          u-letter-spacing-1x
          u-on-hover-background-color-555
          u-text-color-white
          u-font-open-sans
          u-background-color-444
          u-border-color-222
          u-font-weight-300
          u-font-size-500">booyakasha
</a>
No outline is rendered by default.
booyakasha
Button
Buttons are marked up inline 
        
  <a class="Button
            u-letter-spacing-1x
            u-on-active-invert-100
            u-on-hover-background-color-555
            u-text-color-white
            u-font-open-sans
            u-background-color-444
            u-border-color-222
            u-font-weight-300
            u-font-size-500">booyakasha
</a>

<a class="Button
          u-letter-spacing-1x
          u-on-active-invert-100
          u-on-hover-background-color-555
          u-text-color-white
          u-font-open-sans
          u-background-color-444
          u-border-color-222
          u-font-weight-300
          u-font-size-500">booyakasha
</a>
Buttons are rendered inline.
booyakasha booyakasha
Button
The button is disabled. 
      
<a class="Button
          onDisabled
          u-letter-spacing-1x
          u-on-hover-background-color-555
          u-text-color-white
          u-font-open-sans
          u-background-color-444
          u-border-color-222
          u-on-active-invert-100
          u-font-weight-300
          u-font-size-500">booyakasha
</a>
It renders with reduced opacity and does not respond to pointer events.
booyakasha
Button
Text color is not specified 
  
        
<div class="u-text-color-tomato">
    <button class="Button
        u-letter-spacing-1x
        u-font-open-sans
        u-background-color-222
        u-border-color-444
        u-on-hover-text-color-888
        u-on-active-invert-100
        u-font-weight-300
        u-font-size-500">booyakasha
    </button>
</div>
Text color is inherited.
Button
Font family is not specified 
    
          
<div class="u-text-color-tomato u-font-baloo-bhaina">
     <button class="Button
                    u-letter-spacing-1x
                    u-on-hover-text-color-888
                    u-background-color-222
                    u-border-color-444
                    u-on-active-invert-100
                    u-font-weight-300
                    u-font-size-500">booyakasha
  </button>
</div>
Font family is inherited.
Button
Text color is not specified. 
      
            
<div class="u-text-color-sf-neon-mustard">
    <button class="Button
        u-letter-spacing-1x
        u-on-hover-text-color-888
        u-background-color-222
        u-border-color-444
        u-on-active-invert-100
        u-font-weight-300
        u-font-size-500">booyakasha
    </button>
</div>
Text color is inherited.
Button
Buttons with different heights are inlined. 
        
              
<button class="Button
               u-letter-spacing-1x
               u-text-color-neon-mustard
               u-width-8rem
               u-background-color-222
               u-border-color-444
               u-on-active-invert-100
               u-font-weight-300
               u-on-hover-text-color-888
               u-font-size-500">Moshi Moshi
</button>

<button class="Button
               u-letter-spacing-1x
               u-text-color-neon-mustard
               u-width-8rem
               u-background-color-222
               u-border-color-444
               u-on-active-invert-100
               u-font-weight-300
               u-on-hover-text-color-888
               u-font-size-500">Moshi
</button>
The tops are aligned.
Button
The label does not is longer than the width of the button. 
        
              
<button class="Button
               u-on-hover-text-color-888
               u-text-color-neon-mustard
               u-width-8rem
               u-background-color-222
               u-border-color-444
               u-on-active-invert-100
               u-font-weight-300
               u-letter-spacing-1x
               u-font-size-500">Moshi Moshi
</button>
The label wraps.
Button
A buttons onActivate class is added to the button elements classlist via javascript. 
        
              
<button id="activate" onclick="activate()" class="Button
               u-on-hover-text-color-888
               u-text-color-neon-mustard
               u-width-8rem
               u-background-color-222
               u-border-color-444
               u-on-active-invert-100
               u-font-weight-300
               u-letter-spacing-1x
               u-font-size-500">Activate!
</button>

<script>
  function activate() {
    let button = document.getElementById('activate');
    button.isActive = false;
    if (!button.classList.contains('onActivate')) {
      button.classList.add('onActivate');
    }
    else {
      button.classList.remove('onActivate');
    }
  }
  </script>
The buttons renders with the onActivate class when clicked.