<button
data-title="Get the best offers!"
data-help="Call 1800-00-00-123456!"
>
Subscribe
</button>
button {
color: #333;
font-size: 1.3rem;
padding: 2rem;
background-color: #eee;
border: 1px solid #ddd;
position: relative;
transition: all ease 200ms;
}
@media (pointer: fine) {
button:hover {
color: #fff;
border-color: #000;
background-color: #333;
}
button:hover:after {
top: 90%;
background: #aaa;
border-radius: 0.25rem;
content: attr(data-title);
position: absolute;
font-size: 0.7rem;
padding: 0.5rem 0.8rem;
width: max(100%, 200px);
max-width: max-content;
}
}
@media (pointer: coarse) {
button:after {
content: attr(data-title);
display: block;
font-size: 0.75rem;
}
button:hover {
color: #ddd;
border-color: #aaa;
background-color: #999;
}
}
@media (pointer: none) {
button:before, button:after {
display: block;
font-size: 0.75rem;
}
button:after {
content: attr(data-title);
}
button:before {
content: attr(data-help);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.