Question

In Gmail, when I click the compose button, then move my mouse off of it without letting up on the mouse button, I get this sort of elegant two-tiered border:

How is this effect being done? Can I apply this effect to an anchor tag?

Answer 1

Yes, you can, simply use border-style: double:

a {
    color: #fff;
    background-color: #f00;
    font-weight: bold;
    border: 6px double #fff;
    padding: 0.4em 1em;
}​

JS Fiddle demo.

The border-color here is #fff which appears ‘within,’ or between, the background-coloured segments.

If you want to get even more interesting, and have the ‘outer-most border’ be a different colour to the background-color, then you can also use box-shadow (or the vendor-prefixed variants) to:

a {
    text-decoration: none;
    color: #fff;
    background-color: #f00;
    font-weight: bold;
    border: 3px solid #fff;
    padding: 0.4em 1em;
    box-shadow: 0 0 0 4px #f90;
}​

JS Fiddle demo.

This displaces the shadow by zero units horizontally, zero units vertically, has a blur of zero units and a spread of 4px.

The box-shadow approach, of course, allows for multiple different colours to be added to the outer aspect of the element. Unfortunately, though, the box-shadow solution doesn’t displace the element the shadow is, effectively, ‘intangible’. So you may have to account for the width of the shadow(s) and apply relevant margins to the a element elements along with display: inline-block (if they’re to be in-line elements) to allow the margins to take effect.