Question: I'm trying to make a floating add button in my Polymer 1.0 app with pretty much similar functionality to Google Inbox's floating add button. First question then:

To achieve similar functionality, I'm currently using the `paper-fab` element and `onmouseover` and `onmouseout` js functions as follows:

```
<paper-fab id="addBtn" icon="add" class="fab red" onmouseover="hoverOver(this)" onmouseout="hoverOut(this)"></paper-fab>

<script>

    hoverOver = function(srcElement) {
        srcElement.querySelector("paper-material").elevation = 4;
    };

    hoverOut = function(srcElement) {
        srcElement.querySelector("paper-material").elevation = 0;
    };

</script>

```

Is this the recommended approach, or is there a slicker, more 'polymerized' way of accomplishing this?

Answer: 
You can achieve this by using *css* only.

```
paper-fab::shadow > paper-material {
    @apply(--shadow-none);
}

paper-fab::shadow > paper-material:hover {
    @apply(--shadow-elevation-8dp);
}

```

In the source code of the `paper-material` element, you can see that the `elevation` attribute is just for setting the the `box-shadow` style on the element. So instead of updating the attribute in *js* (which then sets the *css*), you can simply update the same thing directly in *css*.

```
<dom-module id="paper-material">
  <style>
    :host {
      display: block;
      position: relative;
      @apply(--shadow-transition);
    }

    :host([elevation="1"]) {
      @apply(--shadow-elevation-2dp);
    }

    :host([elevation="2"]) {
      @apply(--shadow-elevation-4dp);
    }

    :host([elevation="3"]) {
      @apply(--shadow-elevation-6dp);
    }

    :host([elevation="4"]) {
      @apply(--shadow-elevation-8dp);
    }

    :host([elevation="5"]) {
      @apply(--shadow-elevation-16dp);
    }
  </style>

```
Alternatively if you'd like to use html, ensure that the paper material has the attribute "animated" set to "true"