<div id="left" class="bg-example">
<h3>hover</h3>
<div>i'm solid</div>
</div>
<div id="right" class="bg-example">
<h3>hover</h3>
<div>i'm gradient</div>
</div>
.bg-example {
position: absolute;
top: 0;
bottom: 0;
width: 50%;
&#left { left: 0; }
&#right { right: 0; }
text-align: center;
padding-top: 40px;
font-family: Arial, sans-serif;
font-weight: 800;
text-transform: uppercase;
transition: all 500ms ease-in-out;
}
#left {
background: #f1c40f;
color: #2c3e50;
&:hover {
background: #27ae60;
color: #ecf0f1;
}
}
#right {
background: linear-gradient(45deg, #2980b9, #8e44ad);
color: #ecf0f1;
&:hover {
color: #2c3e50;
background: linear-gradient(135deg, #ecf0f1, #f1c40f);
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.