Ir para conteúdo
  • 0

[Resolvido] Como posso fazer esse botão?

Cain

Perguntado por Cain,

 Compartilhar

Pergunta

Cain

Cain

Postado
Postado

Bom, eu estou tendo dificuldades com esse botão, não tenho nenhum botão ou codigo dele, como posso fazer esse tipo de botão?

 

http://jsfiddle.net/bootswatch/gqhenoox/

 

Eu já tentei fazer e procurar na net mas sempre sai bugado... Copiei desse site: https://bootswatch.com/lumen/não deu certo. Tentei fazer do zero também não deu certo. Então deletei todos os codigos de botões do projeto, poderiam me ajudar?

Link para o comentário
Compartilhar em outros sites

10 respostass a esta questão

Posts Recomendados

MrPowerGamerBR

MrPowerGamerBR

Postado
Postado

Eu tenho um parecido:

.button_normal {
    border: 0px none;
    background: #009CFF none repeat scroll 0% 0%;
    border-radius: 4px;
    box-shadow: 0px 5px 0px #006899;
    color: #FFF;
    cursor: pointer;
    font-family: inherit;
    font-style: inherit;
    font-weight: inherit;
    line-height: inherit;
    font-size-adjust: inherit;
    font-stretch: inherit;
    font-feature-settings: inherit;
    font-language-override: inherit;
    font-kerning: inherit;
    font-synthesis: inherit;
    font-variant: inherit;
    margin: 3px;
    outline: 0px none;
    padding: 4px 12px;
    font-size: 120%;
    transition: all 0.1s linear 0s;
}

.button_normal:active {
  box-shadow: 0 2px 0 #006599;
  transform: translateY(3px);
}

A única diferença é que ele não dá aquela abaixadinha quando você passa o mouse por cima, mas eu acho que isto é possível fazer usando animações com CSS.

Link para o comentário
Compartilhar em outros sites
Cain

Cain

Postado
  • Autor
Postado

Esses botões são de uma API chamada bootstrap (http://getbootstrap.com/), muito boa, tem uma grande variedades de elementos para voce colocar no layout do seu site, só basta colocar no <head> e usar os elementos dela.

Eu preciso apenas do botão, que eu não sei fazer. 

Link para o comentário
Compartilhar em outros sites
Cain

Cain

Postado
  • Autor
Postado

Só fazer um hover que diminui o height.

.btn-custom {
    border-bottom: 5px solid #285e8e;
    position: relative;
}

.btn-custom:hover {
    top: 2.5px;
    border-bottom-width: 2.5px;
}

.btn-custom:active {
    top: 5px;
    border-bottom: 0;
}

Fiz igual a esse não deu certo

Link para o comentário
Compartilhar em outros sites
Cain

Cain

Postado
  • Autor
Postado

Eu tenho um parecido:

.button_normal {
    border: 0px none;
    background: #009CFF none repeat scroll 0% 0%;
    border-radius: 4px;
    box-shadow: 0px 5px 0px #006899;
    color: #FFF;
    cursor: pointer;
    font-family: inherit;
    font-style: inherit;
    font-weight: inherit;
    line-height: inherit;
    font-size-adjust: inherit;
    font-stretch: inherit;
    font-feature-settings: inherit;
    font-language-override: inherit;
    font-kerning: inherit;
    font-synthesis: inherit;
    font-variant: inherit;
    margin: 3px;
    outline: 0px none;
    padding: 4px 12px;
    font-size: 120%;
    transition: all 0.1s linear 0s;
}

.button_normal:active {
  box-shadow: 0 2px 0 #006599;
  transform: translateY(3px);
}

A única diferença é que ele não dá aquela abaixadinha quando você passa o mouse por cima, mas eu acho que isto é possível fazer usando animações com CSS.

Foi, obrigado!

 

Pra passar o mouse é só você em vez de active colocar hover.

Link para o comentário
Compartilhar em outros sites
Visitante
Este tópico está impedido de receber novos posts.
 Compartilhar
Ir para lista de perguntas

  • Quem está navegando   0 membros estão online

    • Nenhum usuário registrado visualizando esta página.
×
×
  • Criar Novo...