when I hover on a button, I’m not able to get that message like click or enter or start etc.
how can I style my button through css to get that message before actually clicking a button ?
I used things like .button-subscribe:after etc but I am not sure what CSS will actualy work
>Solution :
You can use a pseudo-element :after as you indicated. Just position it how you want.
.styled {
border: 0;
line-height: 2.5;
padding: 0 20px;
font-size: 1rem;
text-align: center;
color: #fff;
text-shadow: 1px 1px 1px #000;
border-radius: 10px;
background-color: rgba(220, 0, 0, 1);
box-shadow: inset 2px 2px 3px rgba(255, 255, 255, 0.6), inset -2px -2px 3px rgba(0, 0, 0, 0.6);
position: relative;
}
.styled:hover {
background-color: rgba(255, 0, 0, 1);
}
.styled::after {
content: "Tooltip";
position: absolute;
top: 100%;
left: 50%;
translate: -50%;
color: grey;
border: 1px solid red;
display: none;
}
.styled:hover::after {
display: block;
}<button class="favorite styled" type="button">Add to favorites</button>