<div id="app">
  <p>
    <button @click="increment">+</button>
    {{ counter }}
  </p>
</div>

/* Google Fonts */
@import url(https://fonts.googleapis.com/css?family=Open+Sans);

/* set global font to Open Sans */
body {
  font-family: 'Open Sans', 'sans-serif';
  background-image: url(http://benague.ca/files/pw_pattern.png);
}

button {
  border-radius: 5px;
  padding: 15px 25px;
  font-size: 22px;
  text-decoration: none;
  margin: 20px;
  color: #fff;
  position: relative;
  display: inline-block;
  background-color: #55acee;
  box-shadow: 0px 5px 0px 0px #3C93D5;
  border: none 0;
}

button:active {
  transform: translate(0px, 5px);
  box-shadow: 0px 1px 0px 0px;
  outline: none 0;
}

button:hover {
  background-color: #6FC6FF;
}
button:focus {
  outline: none 0;
}
p {
  text-align: center;
}

new Vue({
  el:'#app',
  data() {
    return {
      counter: 0
    }
  },
  methods: {
    increment() {
      this.counter++
    }
  }
})