How do I make both buttons different colors

I want too make both buttons a different collor

<header class="masthead">
      <div class="container">
        <div class="intro-text">
          <div class="intro-lead-in">Jeroen Hooge schilderwerken</div>
          <a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="#services">Prijs</a>
          <a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="#services">Werkzaamheden</a>
        </div>
      </div>
</header>

this is the code I use, But if I change the color both buttons will change and not 1.

What it is now

what I want

htmlcssbuttontwitter-bootstrap-3

Answers

answered 3 months ago ivp #1

Use :nth-of-type(2) to select the second btn and you can change any css property you want.

.intro-text .btn {
  background: #333;
}

.intro-text .btn:nth-of-type(2) {
  background: white;
  color: black;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<header class="masthead">
      <div class="container">
        <div class="intro-text">
          <div class="intro-lead-in">Jeroen Hooge schilderwerken</div>
          <a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="#services">Prijs</a>
          <a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="#services">Werkzaamheden</a>
        </div>
      </div>
</header>

answered 3 months ago Gerardo BLANCO #2

Add to classes. One general for all the a tags. And one for the :first-of-type

.intro-text a:first-of-type{
  background-color: red;
  color: white;
  display: block;
}

.intro-text a {
  background-color: blue;
  color: white;
  display: block;
}
<header class="masthead">
  <div class="container">
    <div class="intro-text">
      <div class="intro-lead-in">Jeroen Hooge schilderwerken</div>
      <a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="#services">Prijs</a>
      <a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="#services">Werkzaamheden</a>
    </div>
  </div>
</header>

answered 3 months ago Adriano Silva #3

You can use those classes available in Bootstrap buttons as example below or create your own classes.

<header class="masthead">
      <div class="container">
        <div class="intro-text">
          <div class="intro-lead-in">Jeroen Hooge schilderwerken</div>
          <a class="btn btn-default btn-xl text-uppercase js-scroll-trigger" href="#services">Prijs</a>
          <a class="btn btn-warning btn-xl text-uppercase js-scroll-trigger" href="#services">Werkzaamheden</a>
        </div>
      </div>
</header>

answered 3 months ago dheeraj Kumar #4

You can inline style for change background for the particular button

.btn {
    display: inline-block;
    border: 2px solid transparent;
    letter-spacing: .5px;
    line-height: inherit;
    border-radius: 0;
    text-transform: uppercase;
    width: auto;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    transition-duration: 0.3s;
    transition-timing-function: ease-in-out;
}

.btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, .open>.dropdown-toggle.btn-primary.focus, .open>.dropdown-toggle.btn-primary:focus, .open>.dropdown-toggle.btn-primary:hover {
    color: #fff;
    background-color: #204d74;
    border-color: #122b40;
}

.btn-primary{
    color: #fff;
    background-color: #286090;
    padding: 10px; 5px;
}
<header class="masthead">
      <div class="container">
        <div class="intro-text">
          <div class="intro-lead-in">Jeroen Hooge schilderwerken</div>
          <a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="#services">Prijs</a>
          <a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" style="background:#ccc;"href="#services">Werkzaamheden</a>
        </div>
      </div>
</header>

answered 3 months ago faizanikram #5

simply give an ID to tag so that it can be identified uniquely

#black{
  background-color: black;
  display: block;
}

#brown {
  background-color: brown;
  display: block;
}
  <header class="masthead">
 <div class="container">
<div class="intro-text">
      <div class="intro-lead-in">Jeroen Hooge schilderwerken</div>
      <a id="black" class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="#services">Prijs</a>
      <a id="brown" class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="#services">Werkzaamheden</a>
    </div>
  </div>
</header>
` 
    

comments powered by Disqus