As a developer working on user interfaces, it’s a common struggle to find yourself in this scenario: You find an awesome library to work with, the site components come together ultra fast and you feel invincible! Well, that’s right up until the point you want to overwrite some default CSS for your application. And then you find yourself elbow-deep in your Devtools and Stack Overflow trying to figure out What selector should I use? and How many lines of !important do I need to add to make this style show up? 😐
Today we’re going to take a look at how to overwrite some of the behaviour and styling of Vuetify's default buttons. Check out the Codepen below to see what we get out of the box and what we want to achieve:
🎨 Button width
Let's begin with trying to make the button take on a square styling. By default, Vuetify's button height is 36px.
Therefore, it would make sense that setting .v-btn { width: 36px; } creates a square button, right?
That was my first instinct, but the button was still rectangular 🤔 In order to hunt down what was going on, I opened my Devtools. When you find yourself trying to style something and it just doesn't work as expected - a good first step is to look under the hood! 🛠️
In order to do that, right click the element you want to style in your project and choose "Inspect" ("Inspect element" in Firefox).
Next, when we check the styles on the div with a class .v-btn, we can see that Vuetify's default styling is interfering with our square plans.
Here you can see that .v-btn has a min-width: 64px property, which is the culprit in the matter. Therefore, to get our button square, we need to overwrite that in our stylesheet like so:
.v-btn {
width: 36px;
min-width: 36px;
}
🎨 Ripple effect
Ripple effect is what happens by default after you click a .v-btn.
The color of the effect is generated automatically by Vuetify from the color of the button itself.
In most cases that's quite handy, since you can have a nice red ripple for your red button with 0 work. However, sometimes you want the ripple effect to be a different color.
For example I wanted the button to be modest light gray, but the ripple effect to be blue. To modify the ripple effect, it would be necessary to hack a bit into Vuetify's v-ripple directive. You can use Material Design's color palette names or theme colors (primary, secondary, success etc) to modify the ripple color like so:
<v-btn v-ripple="{ class: 'primary--text' }">
🎨 Hover effects
By default, Vuetify buttons have a hover effect of a slightly darker background color. I wanted to remove that so that the only hover effect would be the icon scaling up. Interestingly enough .v-btn:hover { background-color: none; } or any other background property removal attempts did not work. It wasn't until scrolling all the way down in Devtools when I started to suspect the ::before pseudo selectors. ::before was there before :hover was cool 😉
Here's how to get rid of that sneaky hover color:
.v-btn::before {
background-color: transparent;
}
And a cherry on top, enlarging the icons on hover is easy to change like so:
.v-btn i:hover{
transform: scale(1.15);
}
And that's a wrap! Hope you found these little tips useful when wrestling with Vuetify buttons in your own projects 💪
🐣 This blog post is a part of Vuetify Beginner's Guide Series. Each blog has been collaboratively worked on by the Vuetify Core Team.
💡 Interested in contributing a topic? Reach out to Johanna on Dev.to or in the Vuetify Community Discord.
Top comments (5)
Great post on a topic that's super relevant to any dev using a UI library in their app. :) Love the use of examples and can't wait to see more!
Excellent, Thanks!!
Hi! Great post - it helped me a lot. Do you, by any chance, know how to style the button caption on hover? I'm trying to change button font color without success for hours!
Thanks a lot for the post. It helps.
Thank you so much @anzelika, I was trying to remove the Hover effects : you save my day !