Remove underline link button in Vue.js and Vuetify

user_12191506 0
Viewed 2863

I use Vue.js for frontend and i use Vuetify as framework i use button like below:

<v-btn
              class="ma-2"
              outlined
              color="success"
              width="150px"
              to="/user"
          >
            <div class="font">
              Search
            </div>
          </v-btn>

and i don't want underline when mouseover on it what should i do?? it's ok before i add to="/user" and i did this and set it as class

.font{
    text-decoration: none;
}

but don't work

and don't want use it as class

display: inline-block;text-decoration:none;
vuetify.js vue.js underline
3 Answers

I you want to remove underlining on all your links just write this in your main css file:

a {
  text-decoration: none;
}

If you want to remove it only for a set of buttons, then create a class for those buttons e.g. btn-link. Then you can make it like this:

.btn-link a{
  text-decoration: none;
}
user_124649000

use it

<v-btn
              class="ma-2"
              outlined
              color="success"
              to="/user"
              style="text-decoration: none; color: inherit;"
          >
            <div class="font-button-search">
              جست و جو
            </div>
          </v-btn>
user_121915060
user_2092880
Related