frontend/src/components/CButton.vue

<template>
  <button class="c-button">
    <span v-if="icon" class="icon">{{icon}}</span>
    <slot></slot>
  </button>
</template>

<script>
export default {
  props: ['icon']
}
</script>

<style lang="scss" scoped>
@import '~@/style/theme.scss';

button {
  border: none;
  outline: none;
  background: transparent;

  cursor: pointer;

  -webkit-tap-highlight-color: transparent;

  display: block;
  min-width: 120px;
  height: 40px;
  background: $theme-blue;
  color: white;
  border-radius: 8px;
  font-size: 14px;
  padding: 0 16px;
  font-weight: 600;

  &:hover {
    background: darken($theme-blue, 5);
  }

  &:active {
    background: darken($theme-blue, 10);
  }
}
</style>