<doc>
<div class='main-container'>
<button>
NORMAL<br />
button
</button>
<button class="special">
SPECIAL<br />
button
</button>
<button>
NORMAL<br />
button
</button>
</div>
</doc>
button {
color: black;
}
button::first-line {
color: blue;
text-transform: uppercase;
}
button:hover {
height: 100px;
}
.special:hover {
color: red;
font-weight: 600;
}
.special:active {
width: 400px;
}
.main-container {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.