paper-button

PolymerElements

by SlashBunny

HTML

<base href="https://raw-dot-custom-elements.appspot.com/PolymerElements/paper-button/v2.0.0/paper-button/">
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="paper-button.html">
<link rel="import" href="../paper-styles/color.html">
<style is="custom-style">
  #container {
    display: flex;
  }
  
  paper-button {
    font-family: 'Roboto', 'Noto', sans-serif;
    font-weight: normal;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
  }
  
  paper-button.pink {
    color: var(--paper-pink-a200);
    --paper-button-ink-color: var(--paper-pink-a200);
  }
  
  paper-button.pink:hover {
    background-color: var(--paper-pink-100);
  }
  
  paper-button.indigo {
    background-color: var(--paper-indigo-500);
    color: white;
    --paper-button-raised-keyboard-focus: {
      background-color: var(--paper-pink-a200) !important;
      color: white !important;
    }
    ;
  }
  
  paper-button.indigo:hover {
    background-color: var(--paper-indigo-400);
  }
  
  paper-button.green {
    background-color: var(--paper-green-500);
    color: white;
  }
  
  paper-button.green[active] {
    background-color: var(--paper-red-500);
  }
  
  paper-button.disabled {
    color: white;
  }

</style>
<div id="container">
  <paper-button class="pink">link</paper-button>
  <paper-button raised class="indigo">raised</paper-button>
  <paper-button toggles raised class="green">toggles</paper-button>
  <paper-button disabled class="disabled">disabled</paper-button>
</div>