<div class="test">
  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quod suscipit corporis nihil eius possimus unde maxime accusamus delectus temporibus? Eveniet ullam fuga eum veritatis repellendus, tempora alias maiores nostrum quod.</p>
  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quod suscipit corporis nihil eius possimus unde maxime accusamus delectus temporibus? Eveniet ullam fuga eum veritatis repellendus, tempora alias maiores nostrum quod.</p>
  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quod suscipit corporis nihil eius possimus unde maxime accusamus delectus temporibus? Eveniet ullam fuga eum veritatis repellendus, tempora alias maiores nostrum quod.</p>
  <button>
    <span>Нажми на меня </span>
    <svg width="20" height="20">
      <rect height="10" width="10" fill="currentColor" transform="rotate(45 0 15)"></rect>
    </svg>
  </button>
  <button>
    <span>Нажми на меня </span>
    <svg width="20" height="20">
      <rect height="10" width="10" fill="currentColor" transform="rotate(45 0 15)"></rect>
    </svg>
  </button>
</div>
.test {
  color: red;
  border: 2px solid;
  padding: 15px;
}
p {
  color: blue;
  border: 1px solid;
  padding: 5px;
}
p:hover {
  color: red;
}
p + p {
  border: 1px #000 solid;
  box-shadow: 0 0 5px;
}
p + p + p {
  color: green;
}
button {
  background: #fff;
  border: 2px solid;
  margin: 20px 7px;
  display: inline-flex;
  align-items: center;
  padding: 10px 15px;
  outline-offset: 5px;
  outline: 2px solid;
  box-shadow: 5px 5px;
  color: red;
}
button:hover {
  color: blue;
}
button:active {
  color: green;
}
button + button {
  color: #516f49;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.