Botões animados usando CSS3

Botões animados que mudam as formas dos icones animados, tudo em CSS3 e HTML. Como CSS3 apoiou os mais populares browsers, os botões em CSS3 tornam-se grande procura de substitutos de imagem e botões script pesado.

Por | @oficinadanet Programação

Como CSS3 apoiou os mais populares browsers, os botões em CSS3 tornam-se grande procura de substitutos de imagem e botões script pesado. Estes botões usam CSS3 para transições e transforma para animar ícones morphing(mudam de forma) para representar diferentes funções. Esta é uma demonstração simples de 5 botões que representam funções como Demo, Download, Digg, e-mail e RSS. Eu espero que prestem muita atenção e consigo entender tudo que explicar.

Preview do resultado:




Nota importante: Este é suportado somente no Safari, Chrome e Firefox 5 + (ainda não lançado), e talvez no IE 10 + (também inédito)

HTML
Esta é a estrutura básica para todos os botões. A classe do
button-container determina que a animação que vai fazer. Existem 5 classes diferentes para cada botão: demo, download, digg, e-mail e rss.



CSS
O primeiro CSS para acrescentar a aparência básica do botão.

body{
    margin: 0;
}
 
a{
    text-decoration:none
}
 
#button-container{
    position: relative; /*Important, Keeps the CSS3 Shapes in place*/
    margin: 10px;
    width: 220px;
    height: 50px;
}
 
#button{
    float: left; margin-right:15px;
    width: 200px;
    height: 50px;
    line-height: 50px;
    background-color: #ddd;
    padding-left: 20px;
 
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
 
    -moz-box-shadow:0 2px 0 #4c9434;
    -webkit-box-shadow:0 2px 0 #4c9434;
    box-shadow:0 2px 0 #4c9434;
 
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, #60B842),
        color-stop(0.85, #7FD13D)
    );
    background-image: -moz-linear-gradient(
        center bottom,
        #60B842 0%,
        #7FD13D 85%
    );
 
    color:#fff;
    font-family:arial,helvetica,sans-serif;
    font-size:17px;
    font-weight:bold;
    text-shadow:1px 1px 1px #4c9434;
}
 
#button:hover{
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, #6DD14B),
        color-stop(0.85, #85DB40)
    );
    background-image: -moz-linear-gradient(
        center bottom,
        #6DD14B 0%,
        #85DB40 85%
    );
    box-shadow:0 2px 0 #5EA839;
}
 
#button:active{
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, #6DD14B),
        color-stop(0.85, #85DB40)
    );
    background-image: -moz-linear-gradient(
        center bottom,
        #6DD14B 0%,
        #85DB40 85%
    );
    box-shadow:0 1px 0 #5EA839;
    margin-top: 1px;
}


Isso por si só, já contribui para uma boa aparência do CSS3 botão. Mas agora nós queremos adicionar ícones animados. Primeiro temos que fazer as formas de manipular e se transformar em ícones diferentes. O ícone de partida básico que eu quero para todos os botões é uma seta. Aqui são os componentes da seta:

/*Shapes and Components*/
 
    #arrow-container{
        position: absolute;
        top:0px;
        right: 0px;
        margin: 15px;
        box-shadow: 10px 10px;
        width: 35px;
        height: 20px;
        -webkit-transition: -webkit-transform 0.3s ease-out;
        -moz-transition: -moz-transform 0.3s ease-out;
        transition: transform 0.3s ease-out;
    }
    #arrow-rectangle{
        float: left; margin-right:15px;
        margin-top: 5px;
        width: 15px;
        height: 10px;
        background-color: #44801c;
        -webkit-transition: -webkit-transform 0.3s ease-out;
        -moz-transition: -moz-transform 0.3s ease-out;
        transition: transform 0.3s ease-out;
    }
    #arrow-rectangle-handle{
        float: left; margin-right:15px;
        margin-top: 5px;
        border-color: #44801c;
        border-style: solid;
        border-width: 5px;
        -webkit-transition: -webkit-transform 0.3s ease-out;
        -moz-transition: -moz-transform 0.3s ease-out;
        transition: transform 0.3s ease-out;
    }
    #arrow-rectangle-staff{
        float: left; margin-right:15px;
        margin-top: 5px;
        width: 5px;
        height: 10px;
        background-color: #44801c;
        -webkit-transition: -webkit-transform 0.3s ease-out;
        -moz-transition: -moz-transform 0.3s ease-out;
        transition: transform 0.3s ease-out;
    }
    #arrow-triangle{
        float: left; margin-right:15px;
        border-color: transparent transparent transparent #44801c;
        border-style: solid;
        border-width: 10px;
        height: 0px;
        width: 0px;
        -webkit-transition: -webkit-transform 0.2s ease-out;
        -moz-transition: -moz-transform 0.2s ease-out;
        transition: transform 0.2s ease-out;
    }


Cada ícone usa uma seta-retângulo e um triângulo seta para criar a seta. O botão Digg é uma exceção porque ele precisa transforma um pouco mais complexa e precisa ser retângulos diferentes: a sarrow-rectangle-staff e a arrow-rectangle-handle. Você pode alterar a duração da transição ao seu gosto, mas eu achei que fica melhor quando ele é rápido.
Finalmente, aqui estão os transforma para criar o efeito animado morphing.

/*Animations*/
 
.rotateDown{
    -webkit-transform: rotateZ(90deg) translateX(5px);
    -moz-transform: rotateZ(90deg) translateX(5px);
    transform: rotateZ(90deg) translateX(5px);
}
.rotateDownMore{
    -webkit-transform: rotateZ(90deg) translateX(15px);
    -moz-transform: rotateZ(90deg) translateX(15px);
    transform: rotateZ(90deg) translateX(15px);
}
.rotate{
    -webkit-transform: rotateZ(90deg);
    -moz-transform: rotateZ(90deg);
    transform: rotateZ(90deg);
}
.change{
    -webkit-transform: scale(0.4) rotateZ(-180deg);
    -moz-transform: scale(0.4) rotateZ(180deg);
    transform: scale(0.4) rotateZ(180deg);
}
.widen{
    -webkit-transform: scaleY(2) translateX(10px);
    -moz-transform: scaleY(2) translateX(10px);
    transform: scaleY(2) translateX(10px);
}
 
/*Digg Animations*/
 
.skinny{
    -webkit-transform: scaleY(.5) scaleX(4);
    -moz-transform: scaleY(.5) scaleX(4);
    transform: scaleY(.5) scaleX(4);
}
#arrow-rectangle-handle.donut{
    -webkit-transform: scale(1.5) translateX(-14px);
    -moz-transform: scale(1.5) translateX(-14px);
    transform: scale(1.5) translateX(-14px);
    height: 5px;
    width: 5px;
    border-width: 2.5px;
}
#arrow-triangle.shovel{
    -webkit-transform: rotateZ(-135deg) translateX(8px) translateY(-8px);
    -moz-transform: rotateZ(-135deg) translateX(8px) translateY(-8px);
    transform: rotateZ(-135deg) translateX(8px) translateY(-8px);
    border-color: transparent transparent #44801c #44801c;
    border-radius: 7px;
}
 
/*Email Animations*/
 
#arrow-triangle.emailRotate{
    -webkit-transform: scale(1.34) scaleY(.7) rotateZ(90deg) translateX(2px) translateY(13.9px);
    -moz-transform: scale(1.34) scaleY(.7) rotateZ(90deg) translateX(2px) translateY(13.9px);
    transform: scale(1.34) scaleY(.7) rotateZ(90deg) translateX(2px) translateY(13.9px);
    border-color: transparent transparent transparent #2A4F11;
}
.emailTranslate{
    -webkit-transform: scale(1.5) scaleX(1.2);
    -moz-transform: scale(1.5) scaleX(1.2);
    transform: scale(1.5) scaleX(1.2);
}
 
/*RSS Animations*/
 
#arrow-triangle.rss{
    -webkit-transform: rotateZ(180deg) translateY(20px);
    -moz-transform: rotateZ(180deg) translateY(20px);
    transform: rotateZ(180deg) translateY(20px);
    border-radius: 30px;
    border-width: 10px;
    border-style: double;
    width: 10px;
    height: 10px;
}
.rssDot{
    -webkit-transform: scaleX(.7) scale(.5) translateX(20px);
    -moz-transform: rotateZ(180deg) translateY(20px);
    transform: rotateZ(180deg) translateY(20px);
    border-radius: 30px;
}


JQUERY
Agora tudo que resta é uma forma de acionar a classes em foco.

(function($){
    $(function(){
 
    $('#button-container.demo').hover(
              function () {
                $('#button-container.demo #arrow-container').addClass('rotate');
                $('#button-container.demo #arrow-triangle').addClass('change');
                $('#button-container.demo #arrow-rectangle').addClass('widen');
              },
              function () {
                $('#button-container.demo #arrow-container').removeClass('rotate');
                $('#button-container.demo #arrow-triangle').removeClass('change');
                $('#button-container.demo #arrow-rectangle').removeClass('widen');
              }
    );
 
    $('#button-container.download').hover(
              function () {
                $('#button-container.download #arrow-container').addClass('rotateDown');
              },
              function () {
                $('#button-container.download #arrow-container').removeClass('rotateDown');
              }
    );
 
    $('#button-container.digg').hover(
              function () {
                $('#button-container.digg #arrow-container').addClass('rotateDownMore');
                $('#button-container.digg #arrow-rectangle-handle').addClass('donut');
                $('#button-container.digg #arrow-rectangle-staff').addClass('skinny');
                $('#button-container.digg #arrow-triangle').addClass('shovel');
              },
              function () {
                $('#button-container.digg #arrow-container').removeClass('rotateDownMore');
                $('#button-container.digg #arrow-rectangle-handle').removeClass('donut');
                $('#button-container.digg #arrow-rectangle-staff').removeClass('skinny');
                $('#button-container.digg #arrow-triangle').removeClass('shovel');
             }
    );
 
    $('#button-container.email').hover(
              function () {
                $('#button-container.email #arrow-triangle').addClass('emailRotate');
                $('#button-container.email #arrow-rectangle').addClass('emailTranslate');
              },
              function () {
                $('#button-container.email #arrow-triangle').removeClass('emailRotate');
                $('#button-container.email #arrow-rectangle').removeClass('emailTranslate');
             }
    );
 
    $('#button-container.rss').hover(
              function () {
                $('#button-container.rss #arrow-triangle').addClass('rss');
                $('#button-container.rss #arrow-rectangle').addClass('rssDot');
              },
              function () {
                $('#button-container.rss #arrow-triangle').removeClass('rss');
                $('#button-container.rss #arrow-rectangle').removeClass('rssDot');
             }
    );
 
    }); // end of document ready
})(jQuery); // end of jQuery name space


Resultado:


Obrigado a todos pela atenção, espero que tenham conseguido desenvolver os botões de forma interessante ao seus gostos. Até mais.

Baixe os arquivos aqui

DEIXE SEU COMENTÁRIOComente aqui
MAIS SOBRE ccs3 html botoões menu
Últimas em Ccs3
    Assine a nossa newsletter

    COMENTÁRIOS

    COMENTÁRIOS

    Comentários