Skip to main content
Inclusão de código postado em site externo. Por favor, não publique perguntas só com o link Fiddle.
Fonte Link
brasofilo
  • 6,7mil
  • 5
  • 30
  • 50

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;}

Veja aquiJSFiddle

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

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

Veja aqui

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

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?

Melhora na interpretação da questão.
Fonte Link
Paulo
  • 10,3mil
  • 15
  • 51
  • 83

Como criar efeitoso efeito fade em botõesum link que utiliza sprite?

Como faço para criar alguns efeitos emCriei um botão ao passar o mouse sobre ele?

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

EXEMPLOVeja aqui

Ele tentei criar um fade, porém,Como eu não soube fazer funcionar.

Achofaço para que ficaria legal alguns efeitos com jQuery/Javascriptocorra o efeito - ou CSSfade na transição do background.

Como criar efeitos em botões

Como faço para criar alguns efeitos em um botão ao passar o mouse sobre ele?

Abaixo segue o botão:

EXEMPLO

Ele tentei criar um fade, porém, eu não soube fazer funcionar.

Acho que ficaria legal alguns efeitos com jQuery/Javascript - ou CSS.

Como criar o efeito fade em um link que utiliza sprite?

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

Veja aqui

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

adicionou 2 caracteres ao conteúdo
Fonte Link
Alexandre Lopes
  • 2,8mil
  • 6
  • 33
  • 53

Como faço para criar alguns efeitos em um botão ao passar o mouse sobre ele?

Abaixo segue o botão:

EXEMPLO

Ele ficou assim fora do lugartentei criar um fade, porém, eu não soube fazer funcionar.

Acho que ficaria legal alguns efeitos com jQuery/Javascript - ou CSS.

Como faço para criar alguns efeitos em um botão ao passar o mouse sobre ele?

Abaixo segue o botão:

EXEMPLO

Ele ficou assim fora do lugar, eu não soube fazer funcionar.

Acho que ficaria legal alguns efeitos com jQuery/Javascript - ou CSS.

Como faço para criar alguns efeitos em um botão ao passar o mouse sobre ele?

Abaixo segue o botão:

EXEMPLO

Ele tentei criar um fade, porém, eu não soube fazer funcionar.

Acho que ficaria legal alguns efeitos com jQuery/Javascript - ou CSS.

Fonte Link
Alexandre Lopes
  • 2,8mil
  • 6
  • 33
  • 53
Carregando