Member Avatar for BogdanCov

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
  • 213 Views
  • 34 Minutes Discussion Span
  • Latest Post Latest Post by BogdanCov
Member Avatar for BogdanCov

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.