<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.