Как сделать такую кнопку с цветом? HTML, SASS

Question

Пытаюсь сделать вот такую кнопку с выделенным цветом (как на картинке):

/* SASS */

@import 'reset.scss';
@import '../fonts/fonts.scss';
@import 'colors.scss';
.container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

body {
  font-family: 'Brown';
  font-size: 23px;
  background-color: $background-color;
}

a {
  text-decoration: none;
}

.nav__menu {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-content: center;
  align-items: center;
  margin-top: 50px;
}

.nav__menu ul li a {
  font-size: 19px;
  font-weight: bold;
  color: #32325d;
  margin-right: 53px;
}

.nav__menu ul>a:nth-child(5) {
  margin-right: 0;
}

.nav__menu .nav ul {
  display: flex;
}

.nav li:last-child {
  background-color: $btn-color;
}

<header>
  <div class="container">
    <div class="nav__menu">
      <div class="logo">
        <img src="/assets/images/Logo.png" alt="LogoType">
      </div>
      <div class="nav">
        <ul>
          <li><a href="#">Product</a></li>
          <li><a href="#">Customers</a></li>
          <li><a href="#">Pricing</a></li>
          <li><a href="#">Docs</a></li>
          <li><a href="#">Sign in</a></li>
        </ul>
      </div>
    </div>
  </div>
</header>

Пытался убрать отступ последнего элемента путём margin-right: 0;, но почему-то не помогло.
Заранее благодарю :)

Answer 1

Элемент a не является прямым потомком ul, по этому данный селектор не срабатывает .nav__menu ul>a:nth-child(5).
Свойство margin-top для nav__menu не будет работать в данном случае, из-за особенности схлопывания внешних отступов, лучше воспользоваться padding-top.
Отступы в данном случае будет корректнее задавать для элементов списка li, тогда можно убрать лишний отступ для последнего элемента по аналогии с тем, как вы задаете бекграунд. Либо воспользоваться таким селектором .nav ul li + li { margin-left: 53px; }, тогда этого отступа вообще не будет.
Стилизовать ссылку в виде кнопки лучше по дополнительному классу, а не через псевдоселекторы.
Для навигации думаю будет уместнее использовать тег nav.
Именование классов не соответствует структуре, элемент с классом nav__menu не может являться родительским для блока с классом nav.

Я бы сделал вот такую структуру

.container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

.header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 50px 0;
}

.header-nav {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.header-nav__item + .header-nav__item {
  margin-left: 50px;
}

.header-nav__link {
  font-size: 19px;
  font-weight: bold;
  color: #32325d;
  text-decoration: none;
}

.header-nav__btn {
  padding: 10px 15px;
  border-radius: 5px;
  background-color: purple;
  font-size: 19px;
  font-weight: bold;
  text-decoration: none;
  color: #fff;
}

<header class="header">
  <div class="container">
    <div class="header__inner">
      <img src="/assets/images/Logo.png" alt="LogoType" class="header__logo">
      
      <nav class="header__nav">
        <ul class="header-nav">
          <li class="header-nav__item">
            <a href="#" class="header-nav__link">Product</a>
          </li>
          <li class="header-nav__item">
            <a href="#" class="header-nav__link">Customers</a>
          </li>
          <li class="header-nav__item">
            <a href="#" class="header-nav__link">Pricing</a>
          </li>
          <li class="header-nav__item">
            <a href="#" class="header-nav__link">Docs</a>
          </li>
          <li class="header-nav__item">
            <a href="#" class="header-nav__btn">Sign in</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</header>

БЛОГ НА HUSL

Как сделать такую кнопку с цветом? HTML, SASS

Ответы (1 шт):