Name Last Update
..
demo Loading commit data...
test Loading commit data...
.bower.json Loading commit data...
.gitignore Loading commit data...
README.md Loading commit data...
bower.json Loading commit data...
index.html Loading commit data...
paper-button.html Loading commit data...

README.md

paper-button

Material Design: Buttons

paper-button is a button. When the user touches the button, a ripple effect emanates from the point of contact. It may be flat or raised. A raised button is styled with a shadow.

Example:

    <paper-button>flat button</paper-button>
    <paper-button raised>raised button</paper-button>
    <paper-button noink>No ripple effect</paper-button>

You may use custom DOM in the button body to create a variety of buttons. For example, to create a button with an icon and some text:

    <paper-button>
      <iron-icon icon="favorite"></iron-icon>
      custom button content
    </paper-button>

Styling

Style the button with CSS as you would a normal DOM element.

    /* make #my-button green with yellow text */
    #my-button {
        background: green;
        color: yellow;
    }

By default, the ripple is the same color as the foreground at 25% opacity. You may customize the color using this selector:

    /* make #my-button use a blue ripple instead of foreground color */
    #my-button::shadow paper-ripple {
      color: blue;
    }

The opacity of the ripple is not customizable via CSS.