Vuetify: [Feature Request] New button variant: plain (no background hover)

[sindrepm]

New Functionality

For some UI I prefer buttons with no background change on hover but rather a change in opacity for the icon/text itself. I am suggesting a new prop plain to v-btn which will basically apply the following styles (as well as having the effect of passing the flat prop):

.btn--plain {
  height: auto;
  width: auto;
  margin: 0;
  padding: 8px;
  min-width: 0;
  > .btn__content {
    padding: 0;
    opacity: 0.75;
    &:before {
      background-color: transparent !important;
      transition: none !important;
    }
  }
  &:hover {
    > .btn__content {
      opacity: 1;
    }
  }
}

Here is an example of how it works/looks:
https://codepen.io/anon/pen/BJOYjd

I have been using this myself for a while and thought maybe others want something similar, so decided to suggest it as an addition to the v-btn component. What do you think? Is this something you will consider?

Improvements

If this is functionality many users request it makes sense to include it in the framework.

Bugs or Edge Cases it Helps Avoid

Users don't have to implement it themselves.

[SiamKreative]

I like this idea :)

[yuens1002]

.v-btn:hover:before {
      background-color: transparent;
    }

should do the trick or add a class your-class:hover:before and apply it on the v-btn instance

[ryantunis]

.v-btn:hover:before {
      background-color: transparent;
    }

should do the trick or add a class your-class:hover:before and apply it on the v-btn instance

This only gets rid of the hover for mouseover. As soon as you move your mouse off the button it does the hover effect from 1 opacity to 0.

[mikegoforth]

.v-btn:hover:before {
      background-color: transparent;
    }

should do the trick or add a class your-class:hover:before and apply it on the v-btn instance

This only gets rid of the hover for mouseover. As soon as you move your mouse off the button it does the hover effect from 1 opacity to 0.

Add this to your CSS (or custom class):

.v-btn:before {
  display: none;
}

This should take care of it. Toggling the transitions as seen below also gives more specific desired result. Cheers!

[joonhuang]

This enhancement should apply whenever clicking on the v-btn as well.

Workaround to avoid opacity get changed to 0 when click on v-btn
.v-ripple__animation{ display: none; }