Ir para conteúdo
Fórum CódigoFonte.net
Legendaryz0FCF

Simples CSS Button Div transition

Recommended Posts

Olá, pessoal, boa tarde !!

Estudei toda uma apostila sobre CSS, porém não estou conseguindo realizar uma simples tarefa !!

Ao passar o mouse no 'button.botao', ativar o movimento do 'div.traco' ! Eis abaixo o 'Código Fonte' que estou tentando:
-------------------------------------

<!DOCTYPE html>
<html>
<head>
<style> 
button.botao {
    width: 150px;
    height: 50px;
    border: none;
    background-color: black;
    color: red;
    font-size: 23px;
}

div.traco {
    width: 20px;
    height: 10px;
    background: red;
    -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s;
}

button.botao:hover div.traco {
    width: 150px;
}
</style>
</head>
<body>

<button class="botao">Botao</button>
<div class="traco"></div>

</body>
</html>
-------------------------------------

Me ajudem por favor !
Obrigado !!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

×