feat(VBtn): add new styling property plain

[ElijahKotyluk]

Description

Resolves #3026

Motivation and Context

How Has This Been Tested?

Jest | Playground

Markup:

<template>
  <v-col>
    <v-row align="center" justify="space-around">
      <v-btn :plain="isPlain" color="primary" @click="isPlain = !isPlain">plain btn</v-btn>
    </v-row>
  </v-col>
</template>

<script>
  export default {
    data () {
      return {
        isPlain: false,
      }
    },
  }
</script>

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Improvement/refactoring (non-breaking change that doesn't add any features but makes things better)

Checklist:

• The PR title is no longer than 64 characters.
• The PR is submitted to the correct branch (master for bug fixes and documentation updates, dev for new features and backwards compatible changes and next for non-backwards compatible changes).
• My code follows the code style of this project.
• I've added relevant changes to the documentation (applies to new features and breaking changes in core library)

[johnleider]

Updated Playground

<template>
  <div class="ma-12 pa-12">
    <v-row
      align="center"
      justify="space-around"
    >
      <v-btn depressed>
        Depressed
      </v-btn>
      <v-btn plain>
        Plain
      </v-btn>
      <v-btn text>
        Text
      </v-btn>
      <v-btn
        depressed
        color="primary"
      >
        Primary
      </v-btn>
      <v-btn
        depressed
        color="error"
      >
        Error
      </v-btn>
      <v-btn
        outlined
        color="success"
      >
        <v-icon left>mdi-vuetify</v-icon>

        Success
      </v-btn>
      <v-btn
        depressed
        disabled
      >
        Disabled
      </v-btn>
    </v-row>
    <div class="text-center">
      <v-btn
        class="ma-2"
        :loading="loading"
        :disabled="loading"
        color="secondary"
        @click="loader = 'loading'"
      >
        Accept Terms
      </v-btn>

      <v-btn
        :loading="loading3"
        :disabled="loading3"
        color="blue-grey"
        class="ma-2 white--text"
        @click="loader = 'loading3'"
      >
        Upload
        <v-icon
          right
          dark
        >
          mdi-cloud-upload
        </v-icon>
      </v-btn>

      <v-btn
        class="ma-2"
        :loading="loading2"
        :disabled="loading2"
        color="success"
        @click="loader = 'loading2'"
      >
        Custom Loader
        <template #loader>
          <span>Loading...</span>
        </template>
      </v-btn>

      <v-btn
        class="ma-2"
        :loading="loading4"
        :disabled="loading4"
        color="info"
        @click="loader = 'loading4'"
      >
        Icon Loader
        <template #loader>
          <span class="custom-loader">
            <v-icon light>mdi-cached</v-icon>
          </span>
        </template>
      </v-btn>

      <v-btn
        :loading="loading5"
        :disabled="loading5"
        color="blue-grey"
        class="ma-2 white--text"
        fab
        @click="loader = 'loading5'"
      >
        <v-icon dark>
          mdi-cloud-upload
        </v-icon>
      </v-btn>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        loader: null,
        loading: false,
        loading2: false,
        loading3: false,
        loading4: false,
        loading5: false,
      }
    },
    watch: {
      loader () {
        const l = this.loader
        this[l] = !this[l]

        setTimeout(() => (this[l] = false), 3000)

        this.loader = null
      },
    },
  }
</script>
<style>
  .custom-loader {
    animation: loader 1s infinite;
    display: flex;
  }
  @-moz-keyframes loader {
    from {
      transform: rotate(0);
    }
    to {
      transform: rotate(360deg);
    }
  }
  @-webkit-keyframes loader {
    from {
      transform: rotate(0);
    }
    to {
      transform: rotate(360deg);
    }
  }
  @-o-keyframes loader {
    from {
      transform: rotate(0);
    }
    to {
      transform: rotate(360deg);
    }
  }
  @keyframes loader {
    from {
      transform: rotate(0);
    }
    to {
      transform: rotate(360deg);
    }
  }
</style>