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 !!