# Buttons design

## Flat style

> This is default button style.

``` html
<vue-goodshare-facebook></vue-goodshare-facebook>
```

<img width="100%" alt="screen shot" src="https://user-images.githubusercontent.com/11155743/32510791-c5863538-c402-11e7-9005-c72db152bd57.jpg">

## Gradient style

``` html hl_lines="4"
<!-- ./index.html -->

<vue-goodshare-facebook 
  button_design="gradient"
></vue-goodshare-facebook>
```

<img width="100%" alt="screen shot" src="https://user-images.githubusercontent.com/11155743/32510792-c5abd842-c402-11e7-8905-2c3c718bd375.jpg">

## Outline style

``` html hl_lines="4"
<!-- ./index.html -->

<vue-goodshare-facebook 
  button_design="outline"
></vue-goodshare-facebook>
```

<img width="100%" alt="screen shot" src="https://user-images.githubusercontent.com/11155743/32510794-c5c5e85e-c402-11e7-98c0-a089bcedf45f.jpg">

## With square edges

``` html hl_lines="4"
<!-- ./index.html -->

<vue-goodshare-facebook 
  has_square_edges
></vue-goodshare-facebook>
```

<img width="100%" alt="screen shot" src="https://user-images.githubusercontent.com/11155743/32510795-c5ed48cc-c402-11e7-83d5-7d774c90be59.jpg">

## With counter

``` html hl_lines="4"
<!-- ./index.html -->

<vue-goodshare-facebook 
  has_counter
></vue-goodshare-facebook>
```

<img width="100%" alt="screen shot" src="https://user-images.githubusercontent.com/11155743/32510930-5a347bcc-c403-11e7-86cb-044429a4a001.jpg">
