0

Hello. I have a button on a web page and when the mouse is over it becomes larger (don't ask why).

.buton {
    /* some code here*/

    height:50px;
    width:100px;
    text-decoration:none;
    text-align:center;
    text-shadow:1px 1px 0px #ffffff;
    transition:width 0.5s, height 0.5s;
}
.buton:hover {
    width:200px;
    height:200px;    
}

In body is this code:

<a href="#" class="buton">BLABLA 1</a>

How can I change the button text when it becomes larger? For example, instead of BLABLA 1, be HELLO 1.

Edited by BogdanCov

1
Contributor
1
Reply
7
Views
3 Years
Discussion Span
Last Post by BogdanCov
0

it's ok, I made it. Maybe anyone is interested. I change so:
CSS

.buton:hover {
    width:200px;
    height:200px;
    font-size:0px; /* hide text */
}
.buton:hover:before {
font-size: 18px;
content: attr(data-hover);
}

HTML

<a href="" class="buton" data-hover="HELLO 1">BLABLA 1</a>

I wish you a good day.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.