title: Ripple effect and shadow not showing on Raised paper-button in Polymer
body: <p>I'm having trouble showing the ripple effect and the raised shadow on a polymer paper-button (v1.0 of Polymer).</p>
  
  <p>It is showing when I run the demonstration (..bower_components/paper-button/demo/index.html) so all the code must be downloaded. Must be missing either an import or some CSS but cannot spot what is different between the demo page and my site page, or if it is some typo.</p>
  
  <p>My Elements document is</p>
  
  <pre><code>&lt;script src='http://www.polymer-project.org/components/platform/platform.js'&gt;&lt;/script&gt;
  
  &lt;!-- Iron --&gt;
  &lt;link rel="import" href="../bower_components/iron-icons/iron-icons.html"/&gt;
  &lt;link rel="import" href="../bower_components/iron-ajax/iron-ajax.html"/&gt;
  
  &lt;!-- Paper Elements --&gt;
  &lt;link rel="import" href="../bower_components/paper-drawer-panel/paper-drawer-panel.html"/&gt;
  &lt;link rel="import" href="../bower_components/paper-header-panel/paper-header-panel.html"/&gt;
  &lt;link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html"/&gt;
  &lt;link rel="import" href="../bower_components/paper-input/paper-input.html"/&gt;
  &lt;link rel="import" href="../bower_components/paper-styles/paper-styles.html"/&gt;
  &lt;link rel="import" href="../bower_components/paper-toolbar/paper-toolbar.html"/&gt;
  &lt;link rel="import" href="../bower_components/paper-material/paper-material.html" /&gt;
  &lt;link rel="import" href="../bower_components/paper-behaviors/paper-button-behavior.html" /&gt;
  &lt;link rel="import" href="../bower_components/paper-behaviors/paper-inky-focus-behavior.html" /&gt;
  &lt;link rel="import" href="../bower_components/paper-button/paper-button" /&gt;
  &lt;link rel="import" href="../bower_components/paper-fab/paper-fab.html" /&gt;
  
  &lt;link rel="import" href="../bower_components/polymer/polymer.html"/&gt;
  </code></pre>
  
  <p>My Page HTML is as follows</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;title&gt;GP and Practice search&lt;/title&gt;   &lt;!-- Scripts --&gt;
      &lt;script src="bower_components/webcomponentsjs/webcomponents-lite.js"&gt;&lt;/script&gt;
      &lt;link rel="import" href="elements/elements.html" /&gt;
      &lt;link rel="stylesheet" type="text/css" href="Styles/styles.css" /&gt;
      &lt;link rel="stylesheet" type="text/css" href="Styles/home.css"/&gt;
      &lt;!-- google fonts definitions --&gt;
      &lt;link href='http://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'&gt;
  
  &lt;/head&gt;
  
  &lt;body unresolved class="fullbleed layout vertical"&gt;
      &lt;dom-module id="page-scafolding"&gt;
          &lt;template&gt;
              &lt;paper-drawer-panel elevation="1"&gt;
                  &lt;paper-header-panel main mode="waterfall-tall"&gt;
                      &lt;paper-toolbar id="mainToolbar"&gt;
                          &lt;paper-icon-button id="paperToggle" icon="menu" paper-drawer-toggle&gt;&lt;/paper-icon-button&gt;
                          &lt;span class="flex"&gt;&lt;/span&gt;
                          &lt;paper-icon-button icon="search" on-tap="srchandler" id="srchandler"&gt;&lt;/paper-icon-button&gt;
                          &lt;input type="text" id="searchText" hidden$="{{hideSearch}}" onkeypress="handleKeyPress(event);" /&gt;
                          &lt;div class="middle paper-font-display2 app-name ident"&gt;Practice List&lt;/div&gt;
                      &lt;/paper-toolbar&gt;
                      &lt;paper-material elevation="1"&gt;
                          &lt;div id="Content" &gt;
                              &lt;span&gt;
                                  &lt;paper-input class="searchBox" label="Search for:"  /&gt;
                              &lt;/span&gt;
                              &lt;div style="text-align:center; padding:10px;"&gt;
                                  &lt;paper-button tabindex="0" raised="true" class="colorful" on-click="searchPractice"&gt;Search for GP Practice&lt;/paper-button&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/paper-material&gt;
  
                  &lt;/paper-header-panel&gt;
              &lt;/paper-drawer-panel&gt;
          &lt;/template&gt;
          &lt;script&gt;
              Polymer({
                  is: "page-scafolding",
                  ready: function () {
                  this.hideSearch = true;
                  this.$.searchText.keyup(function (e) {
                      alert('off to search for something!');
                  });
              },
              srchandler: function () {
                  // search for contents of search box is showing, otherwise show it.
                  if (!this.hideSearch)
                  {
                      alert('off to search for something!');
                  }
                  else {
                      this.hideSearch = !this.hideSearch;
                      if (!this.hideSearch) {
                          this.$.searchText.focus();
                      }
                  }
              },
              searchPractice: function () {
                  alert('clicking practice search');
              }
              });
          &lt;/script&gt;
      &lt;/dom-module&gt;
  
      &lt;page-scafolding /&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>There are two CSS files used by that page</p>
  
  <p><strong>Home.css</strong></p>
  
  <pre><code>#searchText {
      width:200px;
      border: none;
      line-height: 30px;
      border-radius: 5px;
      background: #3F59B5;
      color: #fff;
      outline: 0;
  }
  
  paper-material {
      border-radius: 2px;
      height: 100%;
      padding: 16px 0px 16px 0px;
      width: calc(98.66% - 16px);
      margin: 16px;
      background: white;
  }
  
  #Content
  {
      padding:16px;
  }
  
  paper-button {
      display: block;
      margin-bottom: 24px;
      color: #fff;
      background:#4285F4;
      padding:5px;
      width:175px;
  }
  
  paper-button paper-ripple {
        color: var(--paper-pink-a200);
      }
  </code></pre>
  
  <p>and</p>
  
  <p><strong>Styles.css</strong></p>
  
  <pre><code>body {
      margin:0px;
      background:#e0e0e0;
      font-family:Roboto;
  }
  </code></pre>
  
  <p>Can anyone please see where I am going wrong.</p>