paper-button and paper-material styles don't coordinate.

[notwaldorf]

I have:

<style is="custom-style">
.button {
    padding-right: 10px;
    background-color: #4285f4;
    color: #fff;
    height: 30px;
  }
</style>

and <paper-button class="button" raised>eeeek</paper-button> just dumped in the body, and this ends up looking like this:

[ghost]

I have the same issue. Setting the paper-material height helps, but the vertical alignment of the button text is still off:

.button::shadow paper-material{
    height:8px;
}

[ghost]

Found a work-around: the problem is resolved when you manipulate the size of the button by adjusting the font-size only, which in turn resizes the button

[dgtlife]

When I compared the old paper-button (0.5.5) to the new paper-button (1.0.1) I noticed three key things:

• a paper-material element has replaced the paper-shadow element which was used in 0.5.6 to provide the raised effect
• the paper-material element has been given the wrong CSS and does not fill the button as the paper-shadow did in 0.5.5
• there is no longer a div.button-content to which padding was applied to fill out the button to a reasonable size surrounding the label and any icon when included.

Once the CSS that was applied to paper-shadow (via the fit class) is applied to paper-material, as in:

position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;

and the padding that was applied to div.button-content is applied to paper-button, as in:

padding: 0.7em 0.57em;

we achieve equivalent appearance between the 0.5.5 paper-button and the 1.0.1 paper-button.

I believe this remedy can and should be applied at the component level as in:

<style>

    :host {
      display: inline-block;
      position: relative;
      box-sizing: border-box;
      min-width: 5.14em;
      margin: 0 0.29em;
      padding: 0.7em 0.57em;
      background: transparent;
      text-align: center;
      font: inherit;
      text-transform: uppercase;
      outline: none;
      border-radius: 3px;
      -moz-user-select: none;
      -ms-user-select: none;
      -webkit-user-select: none;
      user-select: none;
      cursor: pointer;
      z-index: 0;

      @apply(--paper-button);
    }
...
    /* Delete the padding applied to .content */
</style>

and

...
_computeContentClass: function(receivedFocusFromKeyboard) {
      var className = 'content fit ';
      if (receivedFocusFromKeyboard) {
        className += ' keyboard-focus';
      }
      return className;
    }
...

I submitted a PR for this.

[dgtlife]

Ignore my post above since it is due to an incompatibility between Meteor and Polymer with Shady DOM. The PR has also been withdrawn.