Question: I would like to create an advanced button based on 'paper-button'. However, if I simply do this

```
<link rel="import" href="../../bower_components/paper-button/paper-button.html">

<dom-module id="my-better-button">
  <script>
    Polymer({
      is: 'my-better-button',
      extends: 'paper-button'
    });
  </script>
</dom-module>

```

then button loses all its styles. Am I doing something wrong?

I am using Polymer 1.0.

Answer: 
To create your own element that uses another custom element, like paper-button, you'll want to make a wrapper.

```
<dom-module id="my-button">
  <template>
    <paper-button>
      <content></content>
    </paper-button>
  </template>
</dom-module>

```

This way whenever you use `<my-button>Tap Me</my-button>` it will really make a paper-button wrapped in my-button.

A good example is [paper-input](https://github.com/PolymerElements/paper-input/blob/master/paper-input.html), which is basically a wrapper for `iron-input`. Take a look at it and see how the properties are passed down.
You can extend custom elements through [Behaviors](https://www.polymer-project.org/1.0/docs/devguide/behaviors.html) like this:

```
<dom-module id="my-better-button">
  <script>
    Polymer({
      is: 'my-better-button',
      behaviors: [betterButton]
    });
  </script>
</dom-module>

```

Behaviors are like Mixins so they are, basically, a Javascript object. A behavior can define lifecycle callbacks, declared properties, default attributes, observers, and listeners.

I suggest you to watch this great video on this topic that explain very well how to use it: <https://www.youtube.com/watch?v=YrlmieL3Z0k>