Home > Back-end >  I need to make both of these buttons different colours
I need to make both of these buttons different colours

Time：09-23

This is my code that I have tried various things to fix. Help would be much appreciated i am new to HTML & CSS

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    .dropbtn {
    background-color: #459b7a;
    color: white;
    padding: 20px;
    font-size: 16px;
    border: none;
    }

    .dropdown {
    position: relative;
    display: inline-block;
    }

    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f1f1f1;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
      }

      .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      }

     .dropdown-content a:hover {background-color: #ddd;}

     .dropdown:hover .dropdown-content {display: block;}

     .dropdown:hover .dropbtn {background-color: #459b7a;}
     </style>
     </head>
     <body>


     <div class="dropdown">
     <button class="dropbtn">Family 2</button>
     <div class="dropdown-content">
     <a value="http://www.">Victoria</a>
     <a value="http://www.">New South Wales</a>
     <a value="http://www.">Canberra</a>
     <a value="http://www.">Queensland</a>
     <a value="http://www.">Northern Territory</a>
      <a value="http://www.">Western Australia</a>
     <a value="http://www.">South Australia</a>
     </div>
     </div>

     </body>
     </html>
 
     <!DOCTYPE html>
     <html>
     <head>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <style>
     .dropbtn {
     background-color: #1375b9;
     color: white;
     padding: 20px;
     font-size: 16px;
     border: none;
     }

     .dropdown {
     position: relative;
     display: inline-block;
     }

    .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    }

    .dropdown-content b {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
     }

    .dropdown-content a:hover {background-color: #ddd;}

     .dropdown:hover .dropdown-content {display: block;}

     .dropdown:hover .dropbtn {background-color: #1375b9;}
     </style>
     </head>
     <body>


     <div class="dropdown">
      <button class="dropbtn">Family</button>
      <div class="dropdown-content">
      <a value="http://www.">Victoria</a>
      <a value="http://www.">New South Wales</a>
      <a value="http://www.">Canberra</a>
      <a value="http://www.">Queensland</a>
      <a value="http://www.">Northern Territory</a>
      <a value="http://www.">Western Australia</a>
      <a value="http://www.">South Australia</a>
     </div>
     </div>

     </body>
     </html>

I dont know where in the HTML or the CSS i am meant to edit in order to be able to have both of the buttons be different colours i have tried changing the hex values on both of the buttons to different colours but even if they are different they both still appear the same on the page

CodePudding user response：

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    .dropbtn {
      background-color: #459b7a;
      color: white;
      padding: 20px;
      font-size: 16px;
      border: none;
    }

    .dropdown {
      position: relative;
      display: inline-block;
    }

    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f1f1f1;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
    }

    .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }

    .dropdown-content a:hover {background-color: #ddd;}

    .dropdown:hover .dropdown-content {display: block;}

    .dropdown:hover .dropbtn {background-color: #459b7a;}

    .colorOil{
      background-color: #c2dd22;
    }
    .colorGray{
      background-color: gray;
    }
  </style>
</head>
<body>


 <div class="dropdown">
   <button class="dropbtn">Family 2</button>
   <div class="dropdown-content">
     <a value="http://www.">Victoria</a>
     <a value="http://www.">New South Wales</a>
     <a value="http://www.">Canberra</a>
     <a value="http://www.">Queensland</a>
     <a value="http://www.">Northern Territory</a>
     <a value="http://www.">Western Australia</a>
     <a value="http://www.">South Australia</a>
   </div>
 </div>


 <div class="dropdown">
  <button class="dropbtn colorOil">Family</button>
  <div class="dropdown-content">
    <a value="http://www.">Victoria</a>
    <a value="http://www.">New South Wales</a>
    <a value="http://www.">Canberra</a>
    <a value="http://www.">Queensland</a>
    <a value="http://www.">Northern Territory</a>
    <a value="http://www.">Western Australia</a>
    <a value="http://www.">South Australia</a>
  </div>
</div>

 <div class="dropdown">
  <button class="dropbtn color1">Family</button>
  <div class="dropdown-content">
    <a value="http://www.">Victoria</a>
    <a value="http://www.">New South Wales</a>
    <a value="http://www.">Canberra</a>
    <a value="http://www.">Queensland</a>
    <a value="http://www.">Northern Territory</a>
    <a value="http://www.">Western Australia</a>
    <a value="http://www.">South Australia</a>
  </div>
</div>
 <div class="dropdown">
  <button class="dropbtn colorGray">Family</button>
  <div class="dropdown-content">
    <a value="http://www.">Victoria</a>
    <a value="http://www.">New South Wales</a>
    <a value="http://www.">Canberra</a>
    <a value="http://www.">Queensland</a>
    <a value="http://www.">Northern Territory</a>
    <a value="http://www.">Western Australia</a>
    <a value="http://www.">South Australia</a>
  </div>
</div>


</body>
</html>

CodePudding user response：

Your code is very complicated about orginization. But this is not your question. So, You should add a new class to one of your buttons. I create a class named other-btn and added this to one of your button.

Edit: you do not mention to, change it when hover too, So I fixed it. Check it again.

<!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    .dropbtn {
    background-color: #459b7a;
    color: white;
    padding: 20px;
    font-size: 16px;
    border: none;
    }

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

    .dropdown {
    position: relative;
    display: inline-block;
    }

    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f1f1f1;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
      }

      .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      }

     </style>
     </head>
     <body>


     <div class="dropdown">
     <button class="dropbtn other-btn">Family 2</button>
     <div class="dropdown-content">
     <a value="http://www.">Victoria</a>
     <a value="http://www.">New South Wales</a>
     <a value="http://www.">Canberra</a>
     <a value="http://www.">Queensland</a>
     <a value="http://www.">Northern Territory</a>
      <a value="http://www.">Western Australia</a>
     <a value="http://www.">South Australia</a>
     </div>
     </div>

     </body>
     </html>
 
     <!DOCTYPE html>
     <html>
     <head>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <style>
     .dropbtn {
     background-color: #1375b9;
     color: white;
     padding: 20px;
     font-size: 16px;
     border: none;
     }
     .other-btn, .other-btn:hover {
      background-color: red;
      }

     .dropdown {
     position: relative;
     display: inline-block;
     }

    .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    }

    .dropdown-content b {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
     }

    .dropdown-content a:hover {background-color: #ddd;}

     .dropdown:hover .dropdown-content {display: block;}


     </style>
     </head>
     <body>


     <div class="dropdown">
      <button class="dropbtn">Family</button>
      <div class="dropdown-content">
      <a value="http://www.">Victoria</a>
      <a value="http://www.">New South Wales</a>
      <a value="http://www.">Canberra</a>
      <a value="http://www.">Queensland</a>
      <a value="http://www.">Northern Territory</a>
      <a value="http://www.">Western Australia</a>
      <a value="http://www.">South Australia</a>
     </div>
     </div>

     </body>
     </html>

CodePudding user response：

Thank you So much for the help learned heaps appreciate the fast and precise help on how to do what I wanted to do with my code many many thanks :)

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    .dropbtn {
      background-color: #459b7a;
      color: white;
      padding: 20px;
      font-size: 16px;
      border: none;
    }

    .dropdown {
      position: relative;
      display: inline-block;
    }

    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f1f1f1;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
    }

    .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }

    .dropdown-content a:hover {background-color: #ddd;}

    .dropdown:hover .dropdown-content {display: block;}

    .dropdown:hover .dropbtn {background-color: #459b7a;}

    .colorOil{
      background-color: #c2dd22;
    }
    .colorGray{
      background-color: gray;
    }
  </style>
</head>
<body>


 <div class="dropdown">
   <button class="dropbtn">Family 2</button>
   <div class="dropdown-content">
     <a value="http://www.">Victoria</a>
     <a value="http://www.">New South Wales</a>
     <a value="http://www.">Canberra</a>
     <a value="http://www.">Queensland</a>
     <a value="http://www.">Northern Territory</a>
     <a value="http://www.">Western Australia</a>
     <a value="http://www.">South Australia</a>
   </div>
 </div>


 <div class="dropdown">
  <button class="dropbtn colorOil">Family</button>
  <div class="dropdown-content">
    <a value="http://www.">Victoria</a>
    <a value="http://www.">New South Wales</a>
    <a value="http://www.">Canberra</a>
    <a value="http://www.">Queensland</a>
    <a value="http://www.">Northern Territory</a>
    <a value="http://www.">Western Australia</a>
    <a value="http://www.">South Australia</a>
  </div>
</div>

 <div class="dropdown">
  <button class="dropbtn color1">Family</button>
  <div class="dropdown-content">
    <a value="http://www.">Victoria</a>
    <a value="http://www.">New South Wales</a>
    <a value="http://www.">Canberra</a>
    <a value="http://www.">Queensland</a>
    <a value="http://www.">Northern Territory</a>
    <a value="http://www.">Western Australia</a>
    <a value="http://www.">South Australia</a>
  </div>
</div>
 <div class="dropdown">
  <button class="dropbtn colorGray">Family</button>
  <div class="dropdown-content">
    <a value="http://www.">Victoria</a>
    <a value="http://www.">New South Wales</a>
    <a value="http://www.">Canberra</a>
    <a value="http://www.">Queensland</a>
    <a value="http://www.">Northern Territory</a>
    <a value="http://www.">Western Australia</a>
    <a value="http://www.">South Australia</a>
  </div>
</div>


</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    .dropbtn {
      background-color: #459b7a;
      color: white;
      padding: 20px;
      font-size: 16px;
      border: none;
    }

    .dropdown {
      position: relative;
      display: inline-block;
    }

    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f1f1f1;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
    }

    .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }

    .dropdown-content a:hover {background-color: #ddd;}

    .dropdown:hover .dropdown-content {display: block;}

    .dropdown:hover .dropbtn {background-color: #459b7a;}

    .colorOil{
      background-color: #c2dd22;
    }
    .colorGray{
      background-color: gray;
    }
  </style>
</head>
<body>


 <div class="dropdown">
   <button class="dropbtn">Family 2</button>
   <div class="dropdown-content">
     <a value="http://www.">Victoria</a>
     <a value="http://www.">New South Wales</a>
     <a value="http://www.">Canberra</a>
     <a value="http://www.">Queensland</a>
     <a value="http://www.">Northern Territory</a>
     <a value="http://www.">Western Australia</a>
     <a value="http://www.">South Australia</a>
   </div>
 </div>


 <div class="dropdown">
  <button class="dropbtn colorOil">Family</button>
  <div class="dropdown-content">
    <a value="http://www.">Victoria</a>
    <a value="http://www.">New South Wales</a>
    <a value="http://www.">Canberra</a>
    <a value="http://www.">Queensland</a>
    <a value="http://www.">Northern Territory</a>
    <a value="http://www.">Western Australia</a>
    <a value="http://www.">South Australia</a>
  </div>
</div>

 <div class="dropdown">
  <button class="dropbtn color1">Family</button>
  <div class="dropdown-content">
    <a value="http://www.">Victoria</a>
    <a value="http://www.">New South Wales</a>
    <a value="http://www.">Canberra</a>
    <a value="http://www.">Queensland</a>
    <a value="http://www.">Northern Territory</a>
    <a value="http://www.">Western Australia</a>
    <a value="http://www.">South Australia</a>
  </div>
</div>
 <div class="dropdown">
  <button class="dropbtn colorGray">Family</button>
  <div class="dropdown-content">
    <a value="http://www.">Victoria</a>
    <a value="http://www.">New South Wales</a>
    <a value="http://www.">Canberra</a>
    <a value="http://www.">Queensland</a>
    <a value="http://www.">Northern Territory</a>
    <a value="http://www.">Western Australia</a>
    <a value="http://www.">South Australia</a>
  </div>
</div>


</body>
</html>

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    .dropbtn {
    background-color: #459b7a;
    color: white;
    padding: 20px;
    font-size: 16px;
    border: none;
    }

    .dropdown {
    position: relative;
    display: inline-block;
    }

    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f1f1f1;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
      }

      .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      }

     .dropdown-content a:hover {background-color: #ddd;}

     .dropdown:hover .dropdown-content {display: block;}

     .dropdown:hover .dropbtn {background-color: #459b7a;}
     </style>
     </head>
     <body>


     <div class="dropdown">
     <button class="dropbtn">Family 2</button>
     <div class="dropdown-content">
     <a value="http://www.">Victoria</a>
     <a value="http://www.">New South Wales</a>
     <a value="http://www.">Canberra</a>
     <a value="http://www.">Queensland</a>
     <a value="http://www.">Northern Territory</a>
      <a value="http://www.">Western Australia</a>
     <a value="http://www.">South Australia</a>
     </div>
     </div>

     </body>
     </html>
 
     <!DOCTYPE html>
     <html>
     <head>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <style>
     .dropbtn {
     background-color: #1375b9;
     color: white;
     padding: 20px;
     font-size: 16px;
     border: none;
     }

     .dropdown {
     position: relative;
     display: inline-block;
     }

    .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    }

    .dropdown-content b {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
     }

    .dropdown-content a:hover {background-color: #ddd;}

     .dropdown:hover .dropdown-content {display: block;}

     .dropdown:hover .dropbtn {background-color: #1375b9;}
     </style>
     </head>
     <body>


     <div class="dropdown">
      <button class="dropbtn">Family</button>
      <div class="dropdown-content">
      <a value="http://www.">Victoria</a>
      <a value="http://www.">New South Wales</a>
      <a value="http://www.">Canberra</a>
      <a value="http://www.">Queensland</a>
      <a value="http://www.">Northern Territory</a>
      <a value="http://www.">Western Australia</a>
      <a value="http://www.">South Australia</a>
     </div>
     </div>

     </body>
     </html>

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    .dropbtn {
      background-color: #459b7a;
      color: white;
      padding: 20px;
      font-size: 16px;
      border: none;
    }

    .dropdown {
      position: relative;
      display: inline-block;
    }

    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f1f1f1;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
    }

    .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }

    .dropdown-content a:hover {background-color: #ddd;}

    .dropdown:hover .dropdown-content {display: block;}

    .dropdown:hover .dropbtn {background-color: #459b7a;}

    .colorOil{
      background-color: #c2dd22;
    }
    .colorGray{
      background-color: gray;
    }
  </style>
</head>
<body>


 <div class="dropdown">
   <button class="dropbtn">Family 2</button>
   <div class="dropdown-content">
     <a value="http://www.">Victoria</a>
     <a value="http://www.">New South Wales</a>
     <a value="http://www.">Canberra</a>
     <a value="http://www.">Queensland</a>
     <a value="http://www.">Northern Territory</a>
     <a value="http://www.">Western Australia</a>
     <a value="http://www.">South Australia</a>
   </div>
 </div>


 <div class="dropdown">
  <button class="dropbtn colorOil">Family</button>
  <div class="dropdown-content">
    <a value="http://www.">Victoria</a>
    <a value="http://www.">New South Wales</a>
    <a value="http://www.">Canberra</a>
    <a value="http://www.">Queensland</a>
    <a value="http://www.">Northern Territory</a>
    <a value="http://www.">Western Australia</a>
    <a value="http://www.">South Australia</a>
  </div>
</div>

 <div class="dropdown">
  <button class="dropbtn color1">Family</button>
  <div class="dropdown-content">
    <a value="http://www.">Victoria</a>
    <a value="http://www.">New South Wales</a>
    <a value="http://www.">Canberra</a>
    <a value="http://www.">Queensland</a>
    <a value="http://www.">Northern Territory</a>
    <a value="http://www.">Western Australia</a>
    <a value="http://www.">South Australia</a>
  </div>
</div>
 <div class="dropdown">
  <button class="dropbtn colorGray">Family</button>
  <div class="dropdown-content">
    <a value="http://www.">Victoria</a>
    <a value="http://www.">New South Wales</a>
    <a value="http://www.">Canberra</a>
    <a value="http://www.">Queensland</a>
    <a value="http://www.">Northern Territory</a>
    <a value="http://www.">Western Australia</a>
    <a value="http://www.">South Australia</a>
  </div>
</div>


</body>
</html>

Page link：https//www.codepudding.com/Backend/124475.html

Prev:Responsive mobile navbar links wont work on mobile
Next:How to bind to data-checked and data-unchecked in Angular
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding