CODEWITHSUNDEEP
sassmaterializecss-specificity
fifn2
fifn2

Reputation: 382

How do I change the color of all of the materialize .btn, .btn-large, and .btn-small to .pink,.accent-1?

I tried to do

    .btn, .btn-large, .btn-small{
        @extend .pink, .accent-1
     }

Is there an issue with the specificity?

Upvotes: 0

Views: 1026

Answers (3)

fifn2
fifn2

Reputation: 382

Oh! It seems like I misplaced my styles.min.css file. Sorry, everyone. It's really nice to know I have these kinds of resources if I need them.

Upvotes: 0

kcamel
kcamel

Reputation: 161

I'm not sure if you're only looking for an answer in SASS, but here's a solution in pure CSS.

From the Materialize.css docs get the hex colour code for pink-accent-1 #ff80ab and apply !important parameter to the background-colour for the buttons just to be sure to override the default Materialize classes. 

.btn , .btn-small, .btn-large{
    background-color: #ff80ab !important;
}

Here's a working fiddle.

Upvotes: 0

Shujat Munawar
Shujat Munawar

Reputation: 1677

You can just override the default btn class by changing background-color property like:

.btn {
   background-color: red;
   color: white;
}

Button would be like 

<button class="btn btn-lg">Hello</button>

enter image description here

Upvotes: 1

Related Questions