Jump to content
Carlos Web Soluções Web

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

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Ewfc2005
      Gostaria de saber como eu devo fazer para alinhar 3 imagens lado a lado, sem fazer o site deixar de ser responsivo.
      que fique igual ao desse site
       
      https://ciesalon.com/
       
    • By Vinicius Bazan
      Bom dia, Boa tarde e Boa noite!
       
        Estava eu aqui brincando um pouco com JS para entender um pouco melhor essa linguagem, pois eu preciso fazer um relógio em uma pagina HTML e um contador que aumente seu número em +1 de tempos em tempos ( no caso eu estava testando em aumentar a cada 5 segundos, considerando que esse número não vai começar do 0, pois ele teria que pegar todos os segundos que já se passaram nesse dia e dividir por 5, assim seu resultado inteiro seria exibido).
        O relógio com bastante esforço e pesquisa eu consegui fazer e está funcionando, até aqui sem dificuldades, o real problema está no contador, eu fui testar sem colocar um setInterval só para ver se o número aparece na tela e... NADA!
       Então como eu não manjo de JS e tentei fazer a partir do que eu usei pra fazer o relógio eu devo ter errado feio em muita coisa.
       
      <!DOCTYPE html> <html> <head> <title>javascript</title> <meta charset="utf-8"> <script type="text/javascript"> function relogio() { var data = new Date(); var horas = data.getHours(); var minutos = data.getMinutes(); var segundos = data.getSeconds(); if (horas < 10) { horas = "0"+horas; } if (minutos < 10) { segundos = "0"+minutos; } if (segundos < 10) { segundos = "0"+segundos; } document.getElementById("relogio").innerHTML=horas+":"+minutos+":"+segundos; } window.setInterval("relogio()",1000); // Aqui começa a função que eu tentei fazer para o contador function contador() { var data = new Date(); var horas = data.getHours(); var minutos = data.getMinutes(); var segundos = data.getSeconds(); var cont = ((minutos + (horas * 60))*60) + segundos ; document.getElementById("contador").innerHTML= Math.floor(cont/5); } </script> <style type="text/css"> #relogio { font:bold 28pt arial; display: block; margin: 100px auto; padding: 30px; background-color: #FFFF00; width: 150px; border-radius: 6px; box-shadow: 0px 0px 5px rgba(0, 0, 0, .5); } #contador { font:bold 28pt arial; display: block; margin: 100px auto; padding: 30px; background-color: #FFFF00; width: 150px; border-radius: 6px; box-shadow: 0px 0px 5px rgba(0, 0, 0, .5); } </style> </head> <body onload="relogio();"> <div id="relogio"> </div> <hr> <div id="contador"> </div> </body> </html>  
       Se alguém puder me ajudar eu agradeço!
    • By egalauber
      Tenho o seguinte trecho de código:
       
      #anima {
              width:600px;
              height:300px;
              margin:auto;
              
              animation: banner 10s infinite;
          }
       
      @keyframes banner {
              0%, 33% {
                      background:#009;
                  }
              34%, 66% {
                      background:#C00;
                  }
              67%, 100% {
                      background:#390;
                  }
          }
       
      No HTML tenho uma div com id=anima.
      Esse código faz a cada 3 segundos mudar a cor dessa div, tipo como se fosse um slide show.
       
      O que eu preciso fazer, é colocar 3 botões, cada botão mudando pra uma cor. Cada botão mudando pra um pedaço da execução do @keyframes banner.
       
      Botão1 - pula para-> 0%, 33% { background:#009; }
      Botão2 - pula para-> 34%, 66% { background:#C00; }
      Botão3 - pula para-> 67%, 100% { background:#390; }
       
      Como?
    • By Carlos Web Soluções Web
      Olá pessoal !!
      Estou desenvolvendo um menu em CSS, e eu gostaria de colocá-lo no CSS Responsive:
       
      @media screen and (max-width: 800px) {
      }
       
      O link do menu de como está atual se encontra em:
      MENU Link

      e o que eu desejo alcançar é:
      MENU RESPONSIVE

      Por favor me ajudem.....abraço !!
    • By lordstarlight
      Olá galera,
       
      Tenho um código que abre uma janela modal clicando num botão .
      Como faço para adaptar esse código para abrir usando um <input type="image" ... ?
       
      Abraço !!!
      <script type="text/javascript"> $('#myModal').on('shown.bs.modal', function () { $('#myInput').trigger('focus') }) </script> <!-- Modal --> <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Janela Modal</h4> </div> <div class="modal-body"> <p>Texto<br> Mais Texto<br> </p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <!-- --> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>  
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.