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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Visitante
Responder

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Processando...

×
×
  • Criar Novo...