Remove the clicking effect from a vuetify’s v-card when it has a link associated to it

I have a list of v-cards, all of which have the to prop set to something. When I click on it, the default behaviour is to have the clicked effect, which I do not want. How do I remove it?

The code looks looks something like this:

<v-col v-for="item in myItems" :key="`${}`" cols="12">
  <v-card :key="" class="pl-4 pr-4" :to="item.href">
    <div class="some-unrelated-class">

Here are some images of what I am talking about:

When I am clicking on one of these items, the following appears:

enter image description here

If I let go of the click, elsewhere on the screen so that I don’t visit the link it stays like this:

enter image description here

I want both of those effects removed and for the item to just stay the white.

I’ve tried playing a bit around with the styles but to no avail and can’t seem to find the source of the color change.

// Example (but doesnt work)
.v-card--link:active {
    background-color: white !important;

Anyway, how can I remove these extra decorations on a v-card component when it is to be used as link?


If you want to remove the animation the occurs when you click on the v-card you can do it by adding:


to your v-card tag, you can read more about ripple directive here:

Leave a Reply

Your email address will not be published. Required fields are marked *