Unable to change vuetify button outline color

Question

I am using Vuetify in my Nuxt app. I have a button which i want to customize, with the help of a class i try to change the border color but seems like it doesn't work.

What I am missing below??

<template>
  <div>
    <v-card class="py-5">      
      <v-btn depressed outlined class="fb-btn grey--text">
        Sign with Facebook
      </v-btn>
    </v-card>
  </div>
</template>
<style scoped>
  .fb-btn .v-btn--outlined {
    border: thin solid #CCCCCC;
  }
</style>

Answer 1

The CSS selector would be:

  .fb-btn.v-btn--outlined {
    border: thin solid #CCCCCC;
  }

Demo