Simples CSS Button Div transition

Carlos Web · Novembro 1, 2018

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

luiz14 · Novembro 2, 2018

É porque os elementos button e div são irmãos, para você conseguir o quer, o elemento button teria que ser pai do div, isso é questão de hierarquia do css. Resumindo, o div teria que estar dentro do button dessa forma para funcionar:

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

Mas assim não vai ficar muito legal e o div não deve ser filho do elemento button, porém você pode fazer com Javascript que vai ficar do jeito que você esta querendo, dessa forma:

<!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;
}
</style>
</head>
<body>
<button id="botao">Botao</button>
<div id="traco"></div>
<script type="text/javascript">
    var botao = document.getElementById("botao");
            botao.onmouseover = function(){
    var traco = document.getElementById("traco");
    traco.style.transitionDuration = "2s";
    traco.style.width='150px';
    };
            botao.onmouseout = function(){
    var traco = document.getElementById("traco");
    traco.style.width='20px';
    };
    </script>
</body>
</html>

Entrar

Arquivado

Simples CSS Button Div transition

Recommended Posts

Carlos Web 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

luiz14 16

Compartilhar este post

Link para o post

Compartilhar em outros sites

PHP+Codeigniter - Adicionar Registro Plano de Contas

Javascript - Passar Parâmetros para uma Função.

PHP - Consulta MySql para prazo de dias

Conteúdo Similar

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante