Jump to content
pemoamsi

Botões com movimento

Recommended Posts

pemoamsi

Boa tarde.

Caí neste forum de para-quedas, a tentar esclarecer a minha dúvida, mas já agora gostava que me desse uma opinião. Tenho uns botões que queria por a subir na pagina quando alguém lá põe o rato (on Over), usei CSS3 ... tudo funciona às quase perfeitamente, menos o factor de eles não pararem de subir e descer - ficam aos saltinhos - :D Como os paro quando o rato tiver em cima?

Código HTML

<html>
    <head>...</head>
    <body>
        <div class="buttons">
            <ul id="nav">
                <li><a class="top" href="#">Sobre Nós</a></li>
            </ul>
        </div>
    </body>
</html>

Código CSS

        a.top {
    	background-color: #000; 
padding-bottom: 10px;
}

/*
    To make the up/down effect on the buttons
-----------------------------------------------------------*/
@-webkit-keyframes movimento-diagonal { from { bottom: 0px; } to { bottom: 20px;}}

a.top:hover {
background: #690;
        -webkit-animation-name: movimento-diagonal;
        -webkit-animation-duration: 0.3s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-direction: alternate;
        width: 100px;
        color: #fff;
        position: relative;
        padding: 2px;
}

Share this post


Link to post
Share on other sites
pemoamsi

E fazia isso como com java?

<A HREF="index.php" onMouseOver="????????";>Sobre nós</A>

no ??? teria de por um comando para aumentar o padding e mudar a imagem de fundo... ou de preferência mudar a "class" do a, como o faço?

Share this post


Link to post
Share on other sites
pemoamsi

Para quem quiser usar:

<head>
<script type="text/javascript">
function changeClass(variavel){
       var v2 = '';
       switch(variavel) {
            case 'idElement1':
            v2 = 'idElement1'
            break;
            document.getElementById(v2).className = 'up'
}
function revertClass(variavel){
       var v2 = '';
       switch(variavel) {
            case 'idElement1':
            v2 = 'idElement1'
            break;
    }
    document.getElementById(v2).className = 'down'
}
</script>
<style type="text/css">
a.down {
    margin: 0 auto;
    padding-top: 50px;
    float: left;
}

a.up {
        margin: 0 auto;
        float: left;
        padding-top: 30px;
        padding-bottom: 20px;
}

</style>
</head>


<body>
   <div>
      <ul>
         <li>
            <a class="down" href="#" id="idElement1" href="#" onmouseover="changeClass('idElement1')" onmouseout="revertClass('idElement1')">Sobre Nós</a>
         </li>
      </ul>
   </div>
</body>

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

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.