Как сделать обе кнопки разного цвета

Я тоже хочу сделать обе кнопки другого цвета

<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>

это код, который я использую, но если я изменю цвет, изменятся обе кнопки, а не 1.

Что это сейчас

что я хочу

как насчет самостоятельного исследования, прежде чем что-то спросить ??? просто используйте дополнительный класс для цвета ...

— 14.03.2018 14:37

Это буквально некоторые базовые знания, которые должен иметь каждый, кто работает с css. Добавьте класс, скажем, «коричневый» к одной из ваших кнопок. Затем задайте для класса коричневый цвет следующим образом: ".brown {background: brown}

— 14.03.2018 14:39

Я согласен с вами обоими, но я все равно отправил ответ. Было бы неплохо, если бы в вашем вопросе был CSS-код, @youarewelcomeee!

— 14.03.2018 14:40

html css button twitter-bootstrap-3

14.03.2018 14:35

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

376

Ответы 5

Используйте : nth-of-type (2), чтобы выбрать вторую btn, и вы можете изменить любое свойство css, которое хотите.

.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>

Я думаю, что :nth-of-type(2) слишком сложен для того, кто задает такие вопросы. Но да. :)

— 14.03.2018 14:56

Может быть, это сложно, но определенно лучше, чем встроенные стили или добавление еще одного имени класса. :)

— 15.03.2018 05:34

14.03.2018 14:42

Добавить в классы. Один общий для всех тегов a. И один для :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>

14.03.2018 14:42

Вы можете использовать эти классы, доступные в Кнопки начальной загрузки, как пример ниже, или создать свои собственные классы.

<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>

14.03.2018 14:42

Вы можете встроить стиль для изменения фона для конкретной кнопки

.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>

14.03.2018 14:51

просто дайте идентификатор тегу, чтобы его можно было однозначно идентифицировать

#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>
`

14.03.2018 15:25

Другие вопросы по теме

Оверлей изображения мигает при изменении CSS, а не при изменении источника

Я пытаюсь построить генеалогическое древо, как мне присоединиться к двум узлам из разных семей

CSS для переключателя HTML

Как заказать строчные элементы в режиме RTL?

Карта D3 не центрируется на странице?

Центрированные элементы внутри гибкого контейнера растут и выходят за пределы верха

Пользовательские стили / темы администратора Pimcore

Javascript получает стиль элемента во всех состояниях

Safari / iOS отзывчивый

Изменить цвет фона по умолчанию для выбранного дерева элементов

Как сделать обе кнопки разного цвета

Ответы 5

Другие вопросы по теме

Похожие вопросы