Zmiania tekstu przez CSS

0

Cześć! Postanowiłem się pobawić css'em (w miarę swoich możliwości), żeby utrwalić wiedzę, ale mam kolejne pytanie... Otóż mam taki kod HTML :

<!DOCTYPE HTML>
<html lang="pl-PL">
    <head>
        <meta charset="utf-8" >
        <link rel="stylesheet" href="styles.css" type="text/css" />
    </head>
    <body>
        <div id="buttondiv">
            <button id="button">button</button>
        </div>
    </body>
</html>

I taki kod CSS:

body 
{
    background-color: gray;
}
*
{
    margin: 0;
    border: 0;
    padding:0;
    box-sizing: border-box;
}
#buttondiv
{
    width:100px;
    height:100px;
    left: 100px;
}
#button
{
    background-color: #682496;
    margin-left: 500px;
    margin-top: 200px;
    width: 100px;
    height: 100px;
    border-radius: 50px 50px 50px 50px;
    border: 5px solid #7935a7;
    transition: all 0.5s ease-in-out;
}
#button:hover
{
    transform: scale(1.2) rotate(360deg);
    border: 10px solid #7935a7;
}

I chodzi oto, że chciałbym z poziomu #button:hover zmienić tekst w <button id="button">button</button> ... Czy da się tak zrobić? A jeśli się nie da, to podacie jakiś zamiennik lub odpowienik? Prosiłbym o pomoc...

0

Co masz na myśli zmienić tekst? Powiększyć czy całkiem po najechaniu ma się zmieniać tekst w buttonie z "button" na inny

0

To drugie, bo np. Powiększyć potrafię - font-size
Ale tu chodzi o całkowitą zmianę z np. Zaloguj na Kliknij, aby się zalogować.

1

Możesz to zrobić za pomocą pseudo selektorów :after i :before i atrybutu content.
Więcej: link

Z alternatyw to oczywiście JS, albo jQuery:

$("#button").on("mouseover", ()=> podmienText());

Więcej: link

PS.
Powyżej, funkcja podmienText() może wyglądać tak:

$("#button).html("Kliknij, aby się zalogować");

1 użytkowników online, w tym zalogowanych: 0, gości: 1