Simples CSS Button Div transition



Simples CSS Button Div transition

Mensagempor carloswebFDW » Qui Nov 01, 2018 5:56 pm

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:

Código: Selecionar tudo
<!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 !!
carloswebFDW

Membro
Membro
 
Mensagens: 14
Data de registro: Qua Mar 11, 2015 12:16 pm

Retornar para XHTML, CSS, XML, HTML

Quem está online

Usuários vendo este fórum: Nenhum membro registrado online e 1 visitante

cron
Shared Web Hosting by HostDime