CODEWITHSUNDEEP
htmlcss
Jachsiu
Jachsiu

Reputation: 1

The button doesn't change background color and doesn't hover

I'm a total rookie in coding so it may be an easy mistake but please help me :)

I made a button in css and I want its color to be main color, but it doesn't work. The button doesn't change the color at all. Also, it doesn't change the color in hover, and the border radius also doesn't work.

Thats the code:

.btn {
  padding: 18px 24px 18px 24px;
  font-size: 18px;
  background-color: $color-main;
  color: #000000;
  font-family: sans-serif;
  border-radius: 30px;
}

.btn:hover {
  background-color: darken($color-main, 3%);
  color: #000000;
}

html of a whole section:

<section class="splash">
  <div class="page-intro">
    <h1 class="main-title">Witaj na mojej stronie!</h1>
    <h2 class="main-subtitle">Test</h2>
    <a class="btn btn-solid" href="#about">o mnie</a>
  </div>
</section>

Hope Y'all help :))

Upvotes: 0

Views: 80

Answers (4)

gregory broyer
gregory broyer

Reputation: 51

if you are a beginner, SCSS or SASS is not used in the same way as CSS, if you are only using html and css only, replace darken (...) with a darker color simply. if you use SASS / SCSS the code works fine with me

Upvotes: 1

Harsh shah
Harsh shah

Reputation: 19

Check this JsFiddle with darken

$blue: #1e90ff; 
.btn  {   padding: 18px 24px 18px 24px;   
          font-size: 18px;  
          background-color: $blue;   
          color: #000000;   
          font-family: sans-serif; 
          border-radius: 30px; 
      }
 .btn:hover  {
 background-color: darken($blue,12);        
 color:#ffffff; 
}

Upvotes: 1

Kevin Shuguli
Kevin Shuguli

Reputation: 1749

I tried like this. It works.

.btn {
  padding: 18px 24px 18px 24px;
  font-size: 18px;
  background-color: $color-main;
  color: #000000;
  font-family: sans-serif;
  border-radius: 30px;
  outline: none;
  border: 3px solid black;
}

.btn:hover {
  background-color: black;
  color: white;
  cursor: pointer;
}

html

<button class="btn">click me</button>

Upvotes: 0

Ebubekir Pamuk
Ebubekir Pamuk

Reputation: 31

Adding !important next to the color you want to use can solve your problem.Like this:

.btn{
background-color:red !important;
    }

Upvotes: 1

Related Questions