I need help changing the default CSS properties for text within a router-link tag. Currently, the text is purple with an underscore and I want to modify the font, size, and color but I'm not sure where to focus in my CSS. I have already attempted using "text-decoration: none" within the .sidebar-buttons button CSS element.
Here is the current design that I want to update.
.sidebar {
grid-area: 2 / 1 / 6 / 2;
background-color: grey;
}
.sidebar-buttons button {
background-color: white;
border-radius: 12px;
width: 40%;
height: 7vh;
}
.sidebar-buttons button:hover {
box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}<div class="sidebar">
<div class="sidebar-buttons">
<hr />
<button>
<router-link to="/">Home</router-link>
</button>
<br />
<button>
<router-link to="/clothes">Clothes</router-link>
</button>
<br />
<button>
<router-link to="/skate">Skate</router-link>
</button>
<br />
<hr />
</div>
</div>