Home / Html / Como mover botões HTML /CSS

Como mover botões HTML /CSS



UPDATE: 

Nova versão, disponível em: https://jsfiddle.net/sostenesg7/hcvo8qf7/116/










CÓDIGO DESATUALIZADO. (Utilizem o código do link acima =)





<html>

<head>

<style type="text/css">
<!--
.janela{position:relative;}
-->
<style>
.cima{
    background-color: #0056ca;
    text-decoration: none;
    float: left;
    color: #0056ca;
    width: 100%;
    height: 50px;  
    margin-top: 0px;
    margin-left: 0px;
}

#topo{
    background-color: #0056ca;
    text-decoration: none;
    float: left;
    color: #ffffff;
    width: 150px;
    height: 80px;  
    margin-top: 20px;
    margin-left: 20px;
}
#topo:hover{
    background-color: #006dff;
    text-decoration: none;
    float: left;
    color: #ffffff;
    width: 147px;
    height: 77px;
    border: 3px solid #cfcfcf;
    margin-top: 17px;
    margin-left: 17px;
}

#topo1{
    background-color: #FF6347;
    text-decoration: none;
    float: left;
    color: #ffffff;
    width: 200px;
    height: 80px;
    margin-top: 20px;
    margin-left: 20px;
}
#topo1:hover{
    background-color: #FF6347;
    text-decoration: none;
    float: left;
    color: #ffffff;
    width: 197px;
    height: 77px;
    border: 3px solid #cfcfcf;
    margin-top: 17px;
    margin-left: 17px;
}
</style>

<script type="text/javascript">

<!-- Início

var ie=document.all;
var nn6=document.getElementById&&!document.all;
var isdrag=false;
var x,y;
var dobj;

function movemouse(e)
{
if (isdrag)
{
dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;
dobj.style.top = nn6 ? ty + e.clientY - y : ty + event.clientY - y;
return false;
}
}

function selectmouse(e)
{
var fobj = nn6 ? e.target : event.srcElement;
var topelement = nn6 ? "HTML" : "BODY";
while (fobj.tagName != topelement && fobj.className != "janela")
{
fobj = nn6 ? fobj.parentNode : fobj.parentElement;
}

if (fobj.className=="janela")
{
isdrag = true;
dobj = fobj;
tx = parseInt(dobj.style.left+0);
ty = parseInt(dobj.style.top+0);
x = nn6 ? e.clientX : event.clientX;
y = nn6 ? e.clientY : event.clientY;
document.onmousemove=movemouse;
return false;
}

}

document.onmousedown=selectmouse;
document.onmouseup=new Function("isdrag=false");
// Fim -->

</script>

</head>
<body>
<a href="#" title="metro"><div  class="cima"></div></a>
<a href="#" title="metro"><div id="topo" class="janela"></div></a>
<a href="#" title="metro"><div id="topo1" class="janela"></div></a>
<a href="#" title="metro"><div id="topo" class="janela"></div></a>
<a href="#" title="metro"><div id="topo1" class="janela"></div></a>
<a href="#" title="metro"><div id="topo" class="janela"></div></a>
<a href="#" title="metro"><div id="topo1" class="janela"></div></a>
<a href="#" title="metro"><div id="topo" class="janela"></div></a>
<a href="#" title="metro"><div id="topo1" class="janela"></div></a>
</body>
</html>









Como mover botões HTML /CSS Como mover botões HTML /CSS Reviewed by Sóstenes Gomes on 18:00 Rating: 5

8 comentários

  1. Unknown21 de novembro de 2016 às 15:51

    Show, tava precisando muito disso! Poderia me dizer como faço para que o botão permaneça na posição que movi mesmo atualizando a pagina? Obrigado.

    ResponderExcluir
    Respostas
    1. Dayvid24 de novembro de 2016 às 15:42

      Oi, você tem que salvar a posição no cookie do navegador!

      Excluir
  2. Jefté21 de novembro de 2018 às 14:34

    Muito bom, vou fazer meu projeto de web baseando-me nesse HTML/Script

    ResponderExcluir
  3. Angelo12 de fevereiro de 2019 às 23:52

    bons dias! prezado, como substituir as figuras por imagens?

    ResponderExcluir
  4. Angelo12 de fevereiro de 2019 às 23:52

    bons dias! prezado, como substituir as figuras por imagens?

    ResponderExcluir
    Respostas
    1. Sóstenes Gomes31 de março de 2019 às 20:14

      Opa, amigo. Aqui tem uma versão mais organizada, com um novo código.
      https://jsfiddle.net/sostenesg7/hcvo8qf7/116/

      Lá, estou movendo imagens. Espero ter ajudado. Bom trabalho.

      Excluir
  5. Unknown2 de agosto de 2020 às 20:28

    Olá, tem algum código em HTML que faz com que qualquer imagem possa se mover livremente?

    ResponderExcluir
    Respostas
    1. Sóstenes Gomes16 de novembro de 2020 às 02:29

      Opa, amigo. Aqui tem uma versão mais organizada, com um novo código.
      https://jsfiddle.net/sostenesg7/hcvo8qf7/116/

      Lá, estou movendo imagens. Espero ter ajudado. Bom trabalho.

      Excluir

Assinar: Postar comentários (Atom)