Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17736
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Botões cinza com sombra igual do Google

29-09-2012 19:59

Nesse post vou postar um código oferecido na net para deixar um botão "input button" com a cor cinza e com sombra, parecido com os botões no Google.

<style> /*--set the button design--*/ .chrome-button { text-decoration:none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, 0% 0%, 0% 40%, from(#fafafa), to(#e5e5e5)); /* Safari 5.1, Chrome 10+ */ background: -webkit-linear-gradient(top, #fafafa, #e5e5e5); /* Firefox 3.6+ */ background: -moz-linear-gradient(top, #fafafa, #e5e5e5); /* IE 10 */ background: -ms-linear-gradient(top, #fafafa, #e5e5e5); /* Opera 11.10+ */ background: -o-linear-gradient(top, #fafafa, #e5e5e5); border: 1px solid #aaa; color: #444; font-size: inherit; margin: 0; min-width: 4em; padding: 3px 12px; } /*--mouse over effect--*/ .chrome-button:hover { text-decoration:none; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, 0% 0%, 0% 40%, from(#fefefe), to(#fefefe)); /* Safari 5.1, Chrome 10+ */ background: -webkit-linear-gradient(top, #fefefe, #e9e9e9); /* Firefox 3.6+ */ background: -moz-linear-gradient(top, #fefefe, #e9e9e9); /* IE 10 */ background: -ms-linear-gradient(top, #fefefe, #e9e9e9); /* Opera 11.10+ */ background: -o-linear-gradient(top, #fefefe, #e9e9e9); border-color: #999; color: #222; } /*--Set active behaviour of the button, when you click on it--*/ .chrome-button:active { -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2); -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2); /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, 0% 0%, 0% 40%, from(#f4f4f4), to(#dcdcdc)); /* Safari 5.1, Chrome 10+ */ background: -webkit-linear-gradient(top, #f4f4f4, #dcdcdc); /* Firefox 3.6+ */ background: -moz-linear-gradient(top, #f4f4f4, #dcdcdc); /* IE 10 */ background: -ms-linear-gradient(top, #f4f4f4, #dcdcdc); /* Opera 11.10+ */ background: -o-linear-gradient(top, #f4f4f4, #dcdcdc); color: #333; } /*--Set the button disabled designed--*/ .chrome-button[disabled], .chrome-button[disabled]:hover { text-decoration:none; -webkit-box-shadow: none; -moz-box-shadow:none; box-shadow:none; /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, 0% 0%, 0% 40%, from(#fafafa), to(#e5e5e5)); /* Safari 5.1, Chrome 10+ */ background: -webkit-linear-gradient(top, #fafafa, #e5e5e5); /* Firefox 3.6+ */ background: -moz-linear-gradient(top, #fafafa, #e5e5e5); /* IE 10 */ background: -ms-linear-gradient(top, #fafafa, #e5e5e5); /* Opera 11.10+ */ background: -o-linear-gradient(top, #fafafa, #e5e5e5); border-color: #aaa; color: #888; } /*--to make small buttons, prior to existing design--*/ .small{font-size:0.8em; padding:2px 5px;} </style> <button class="chrome-button">Download Google Chrome</button> <button class="chrome-button small">Download Google Chrome</button> <button disabled="disabled" class="chrome-button">Download Google Chrome</button> <button disabled="disabled" class="chrome-button small">Download Google Chrome</button>


Fonte*: http://blog.sachinkraj.com/how-to-creat ... le-chrome/

Para botões coloridos com sombra, acesse*
http://www.briangardner.com/social-media-buttons/

Outra boa referência sobre estilização dos botões*
http://www.webstuffshare.com/2012/02/st ... eferences/

* Conteúdo em inglês
0
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado