0

Criei um link com um efeito de transição, porém não acontece um fade, mas sim um movimento do background.

HTML

<a class="botao" href="#">Contrate agora</a>

CSS

.botao {
    background:url(https://i.sstatic.net/5PWNy.png) 0 0;
    color: #fff;
    padding:10px;
    border-bottom: 1px solid #000;
    box-shadow: 0 1px 0 transparent;
    -moz-box-shadow: 0 1px 0 transparent;
    -webkit-box-shadow: 0 1px 0 transparent;
    position:relative;
    font-family: Tahoma, Geneva, sans-serif;
    z-index:0;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -ms-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s; 
}
.botao:hover {
    background-position: 0 -50px;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -ms-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s; 
}
.botao:active {
    box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.76);
    -webkit-box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.76);
    -moz-transition: inset 0px 0px 10px rgba(0, 0, 0, 0.76);
    -ms-transition: inset 0px 0px 10px rgba(0, 0, 0, 0.76);
    -o-transition: inset 0px 0px 10px rgba(0, 0, 0, 0.76);
}    
a {text-decoration:none;}

JSFiddle

Como eu faço para que ocorra o efeito fade na transição do background?

7
  • O que você quer dizer com fora do lugar? É aquela linha branca que aparece em cima da linha preta, na parte de baixo? Commented 7/05/2014 às 1:15
  • 1
    Explique melhor o seu problema, não está claro o que você quer.
    – Paulo
    Commented 7/05/2014 às 1:16
  • não, tipo, eu coloquei uma transição, porém ele não ocorre o fade, e sim ele só muda a posição do background. jsfiddle.net/a5Yn8/3 Commented 7/05/2014 às 1:16
  • É que você está animando efetivamente o background position, por isso não tem o fade. Para ter fade, teria que animar outra propriedade Commented 7/05/2014 às 1:23
  • 2
    Eu sugiro reformular um pouquinho a pergunta e o título, para refletir melhor o desejo pelo efeito do fade. A expressão "fora do lugar" fica muito vaga Commented 7/05/2014 às 1:32

2 Respostas 2

3

Pela minha experiência e por essa outra resposta aqui, não é possível fazer fade de opacidade entre dois background-image utilizando apenas CSS3.

O que você teria que fazer, seria criar dois elementos sobrepostos, com background-image diferentes, e animar suas respectivas opacity via CSS3 Animation.

Se quiser mesmo fazer em JavaScript, esse código aqui serve de exemplo, não utiliza nenhuma funcionalidade muito nova, e funciona no Chrome, Firefox e até no IE9:

<!DOCTYPE html>
<html lang="pt-br" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Teste</title>
        <style type="text/css">
        .container, .botao {
            font: normal 16px tahoma;
            text-align:center;
            width: 150px;
            height: 40px;
            color:#FFF;
            cursor: pointer;
            display: inline-block;
            vertical-align: bottom;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
        }
        .container {
            position: relative;
        }
        .botao {
            padding:10px;
            position: absolute;
            left: 0px;
            top: 0px;
        }
        .frente {
            background: url(https://i.sstatic.net/5PWNy.png) 0 -100px;
            z-index: 1;
        }
        .tras {
            background: url(https://i.sstatic.net/5PWNy.png) 0 -150px;
            z-index: 0;
        }
        .container:active .tras {
            box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.76);
            -webkit-box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.76);
            -moz-transition: inset 0px 0px 10px rgba(0, 0, 0, 0.76);
            -ms-transition: inset 0px 0px 10px rgba(0, 0, 0, 0.76);
            -o-transition: inset 0px 0px 10px rgba(0, 0, 0, 0.76);
        }
        </style>
    </head>
<body>
    <span>Botão 1:</span>
    <div class="container">
    <div class="botao frente" style="opacity: 1;" id="el1">TESTE</div>
    <div class="botao tras">TESTE</div>
    </div>

    <span>Botão 2:</span>
    <div class="container">
    <div class="botao frente" style="opacity: 1;" id="el2">TESTE 2</div>
    <div class="botao tras">TESTE 2</div>
    </div>

    <script type="text/javascript">
    function buttonMouseChanged(fadingIn) {
        //Trabalhando com o Closure a nosso favor ;)
        var _this = this, animate;
        animate = function () {
            var o = parseFloat(_this.style.opacity);
            if (_this.fadingIn) {
                o += 0.05;
                if (o < 1)
                    setTimeout(animate, 1000 / 60);
                else
                    o = 1;
            } else {
                o -= 0.05;
                if (o > 0)
                    setTimeout(animate, 1000 / 60);
                else
                    o = 0;
            }
            _this.style.opacity = o;
        };
        this.fadingIn = fadingIn;
        setTimeout(animate, 1000 / 60);
    }

    function buttonMouseEnter() {
        buttonMouseChanged.call(this, false);    
    }

    function buttonMouseLeave() {
        buttonMouseChanged.call(this, true);    
    }

    function prepareButton(id) {
        var btn = document.getElementById(id);
        btn.onmouseenter = buttonMouseEnter;
        btn.onmouseleave = buttonMouseLeave;
    }

    prepareButton("el1");
    prepareButton("el2");
    </script>
</body>
</html>

Repare como o valor da opacity de el1, e de el2, começa definido como 1, para poder fazer o parseFloat() funcionar sempre.

Para fazer a animação melhorar um pouco, seria interessante não utilizar um valor fixo (como 0.05) para somar e subtrair do opacity, mas um valor proporcional ao tempo decorrido desde a última execução da função animate().

1
  • Por favor evitem longas discussões nos comentários; a conversa de vocês foi movida para o chat
    – Maniero
    Commented 24/02/2017 às 19:11
3

Eu fiz aqui um exemplo utilizando opacity, veja:

HTML

<a href="#" class="botao"><span>Contrate agora</span><span></span></a>

CSS

.botao {
    display: inline-block;
    position: relative; 
    width:120px;
    height:30px;        
    text-align:center;
    text-decoration:none;
    color:#FFF;
    background: url(https://i.sstatic.net/5PWNy.png);
}
.botao span:first-child{
    z-index:30;
    position:absolute;
    display:block;
    left:0;right:0;margin:auto;
    margin-top:5px;
}

.botao span:last-child{z-index:29;
    position: absolute;  z-index:0;  
    top: 0; left: 0; bottom: 0; right: 0;
    background: url(https://i.sstatic.net/5PWNy.png);
    background-position: 0 -50px;
    opacity: 0;
    -webkit-transition: opacity 0.5s;
    -moz-transition:    opacity 0.5s;
    -o-transition:      opacity 0.5s;
}
.botao:hover span {
    opacity: 1;
}

Exemplo no JSFiddle

Referência utilizando sprite: http://css-tricks.com/fade-image-within-sprite/

10
  • 1
    Obrigado! @Paulo Maciel ficou ótimo, agora é só integrar. Commented 7/05/2014 às 2:01
  • o seu ficou excelente, porém, só não tem a trasição no IE. eu achei isso: toprated.com.br/static-content/jquery-button Obrigado paulo pela ajuda! :D Commented 7/05/2014 às 2:15
  • 1
    acho que vou usar seu exemplo, até porque eu acho que estou usando muitos scripts, vou dar uma maneirada. Esse acima ele usa jQuery, ele faz com que ao passar o mouse sobre o botão acontecer o opacity com uma transição. Commented 7/05/2014 às 2:29
  • 1
    eu atualizei seu código: jsfiddle.net/a5Yn8/6 olha ai como ficou! ;) Commented 7/05/2014 às 2:46
  • @AlexandreLopes ficou bom! E para funcionar no IE você deve usar filter:alpha(opacity=valor); olha em css-tricks.com/snippets/css/cross-browser-opacity exemplos
    – Paulo
    Commented 7/05/2014 às 3:09

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .