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


Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17547
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ão com estilo onMouseover

30-07-2009 10:44

Quem quer um botão com um belo efeito estilo onMouseover siga esses passos

Copie essa figura * as 4 juntas formam uma só
http://www.thinkflick.com/wp-content/uploads/2008/11/btn0.png

Copie esse CSS para seu documento

a.button, span.button, del.button{ display:-moz-inline-box; display:inline-block; cursor:pointer; border:none; font-size:0; line-height:0; /* for Safari, read this first http://creativebits.org/webdev/safari_background_repeat_bug_fix */ background-position:0 0; background-repeat:no-repeat; height:30px; text-decoration:none; color:#2e523b; font-style:normal; margin:0 6px 0px 0; padding:0 10px 0 0; vertical-align:middle; padding-top:-2px; _position:relative; _width:10px; _overflow-y:hidden; } a.button, span.button, del.button, a.button span, span.button button, span.button input, del.button span{ background-image:url(btn0.png); _background-image:url(btn0.png); } a.button span, span.button button, span.button input, del.button span{ white-space:nowrap; cursor:pointer; color:#222; display:-moz-inline-box; display:inline-block; line-height:1; letter-spacing:0 !important; font-family:"Arial" !important; font-size:12px !important; font-style:normal; background-color:transparent; background-position:100% 0; background-repeat:no-repeat; height:30px; padding:8px 20px 0 10px; margin:0 -16px 0 10px; border:none; vertical-align:text-top; zoom:1; _position:relative; _padding-left:0px; _padding-right:12px; _margin-right:-10px; _display:block; _top:0; _right:-5px; } span.button button{ line-height:2.5;/*Opera need this*/ } html.safari a.button span, html.safari del.button span{ line-height:1.3; } html.safari span.button button{ line-height:2.6; } html.safari a.button:focus, html.safari span.button button:focus{ outline:none; } del.button{ /* cursor:not-allowed; */ background-position:0 -120px; } del.button span{ cursor:default; color:#aaa !important; background-position:100% -120px; } span.button button, span.button input{ padding-top:0px; line-height:2.5;/*Opera need this*/ } /** optional **/ /* a.button:visited{ color:#aaa; } */ /*Hover Style*/ a.button:hover, span.button:hover, a.button:focus, a.dom-button-focus, span.button-behavior-hover{ background-position:0 -60px; color:#222; text-decoration:none; } a.button:hover span, span.button:hover button, a.button:focus span, span.button-behavior-hover button, span.button-behavior-hover input{ background-position:100% -60px; } a.button:active, a.button:focus span{ color:#444; } del.button-behavior-hover, del.button:hover{ background-position:0 -180px; /* cursor:not-allowed; */ } del.button-behavior-hover span, del.button:hover span{ background-position:100% -180px; /* cursor:not-allowed; */ } /*Optional hack for IE6 to simulate :hover selector*/ span.button button, del.button span, span.button input{ _behavior:expression( (function(el){ if( typeof( behavior_onMouseEnter) == 'undefined'){ behavior_onMouseEnter = function(el){ var dEl = this.parentNode; var sClass = dEl.className ; dEl.__defaultClassName = sClass ; dEl.className = sClass + ' button-behavior-hover'; this.setCapture(); }; behavior_onMouseLeave = function(el) { var dEl = this.parentNode; dEl.className = dEl.__defaultClassName ; dEl.__defaultClassName = undefined; this.releaseCapture(); }; }; el.runtimeStyle.behavior = 'none'; el.onmouseenter = behavior_onMouseEnter; el.onmouseleave = behavior_onMouseLeave; })(this)); }

HTML de exemplo

// Simple anchor <a class="button" href="#"><span>Your link Text</span></a>   //Form button //For IE <span class="button"><input name="foo" type="submit" value="yout text" /></span>   // For Not IE (if browser is different) <span class="button"><button>your text</button></span>   //Disabled Buttons <del class="button"><span>your text</span></del>

Fonte: http://www.thinkflick.com/how-to/cool-css-rounded-corner-buttons-and-links/
0
A melhor hospedagem para o seu site HostGator!

Quem está online

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