HTML CSS Double border button with hover effect

How to create a double border button with HTML CSS box shadow with hover animation effect.

Final Output:

1. Add your HTML button.

<button>Button</button>

Output:

2. Add some padding and letter spacing. And increase the button’s font size as well. Add a background color and set the cursor to pointer.

button {
  padding: 0.5em 1.5em;
  font-size: 1.2em;
  letter-spacing: 2px;
  background-color: #fff;
  cursor: pointer;
}

Output:

3. We’ll use the CSS box-shadow property to create a double border for the button.

We’ll do this by using two box-shadows, one will be the white gap between the 2 borders, and the second will be for the black double border.

Add the box shadows by using only the spread radius, with no offsets or blur.

For reference: box-shadow: h-offset v-offset blur spread color;

Also, set a button border to have a vibrant border.

button {
  box-shadow: 0 0 0 4px #fff, 0 0 0 6px #000;
  border: 2px solid #000;
}

Output:

4. For the button hover effect, we’ll again use the box shadow. But for hover, use only the blur radius instead of the spread radius.

button:hover {
  box-shadow: 0 0 4px #fff, 0 0 6px #000;
}

Output:

5. Get a smooth button hover animation by adding a transition to the button.

button {
  transition: all 0.5s;
}

Output:

Final Output Code for Double border button with hover effect HTML CSS:

HTML:

<button>Button</button>

CSS:

button {
  padding: 0.5em 1.5em;
  font-size: 1.2em;
  letter-spacing: 2px;
  background-color: #fff;
  border: 2px solid #000;
  box-shadow: 0 0 0 6px #fff, 0 0 0 8px #000;
  cursor: pointer;
  transition: all 0.5s;
}

button:hover {
  box-shadow: 0 0 6px #fff, 0 0 8px #000;
}