Firefox button outer glow with CSS

Question

Is there a way to make an outer glow in Firefox using a CSS :focus rule? (similar to what Chrome already has)

musaul · Accepted Answer · 2011-04-19T19:23:01.390

3

You could add a -moz-box-shadow (or just box-shadow if you are only interested in Firefox 4 and later) for your :focus rule. You can add glow of various degrees using that.

edited Apr 19 '11 at 19:23

answered Apr 19 '11 at 16:12

musaul

2,341
19
26

Firefox 13 does not support `-moz-box-shadow`. See http://stackoverflow.com/questions/5517744/remove-extra-button-spacing-padding-in-firefox – 700 Software Dec 21 '12 at 14:57

score 3 · Answer 2 · answered Apr 19 '11 at 16:16

You can do the same thing like this:

HTML:

<button id="a">click</button>

CSS:

button{
background:#f7f7f7;padding: 0 .5em;
height: 2.0833em;
border: 1px solid #CCC;
color: black;
background: #F6F6F6;
background-image: -moz-linear-gradient(top,white,#EFEFEF);
background-image: -webkit-gradient(linear,left top,left bottom,from(white),to(#EFEFEF));
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=white,endColorStr=#EFEFEF);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
overflow: visible;}

button:hover{
    box-shadow:0 0px 3px #999;
    -webkit-box-shadow:0 0px 3px #999;
    -moz-box-shadow:0 0px 3px #999;
}

Check on jsfiddle: http://jsfiddle.net/naveed_ahmad/LZGq6/

+1: Good functioning example. The simple answer is `button{background:#f7f7f7} button:focus{-moz-box-shadow:0 0px 3px #C80;}`. Since I only wanted it to work in Firefox. — 700 Software, Apr 19 '11 at 21:46

score 0 · Answer 3 · answered Apr 19 '11 at 16:15

This can be done by multiple shadows:

CSS

color: #000;
background: #000;
text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;

see example 5.5:

http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/

Firefox button outer glow with CSS

3 Answers3