Create an "architectural" design button using CSS

Creating a button where the borders split into two on hover might seem complicated, yet nothing could be easier to do! Let's discover together in this article how.

Step 1

The HTML code.

<button>
    View the gallery
</button>

You understand, nothing beats starting with an "architectural" example for our button with an architectural style, so we ask our user to have consulted the gallery.

Step 2

Let's now style our button.

button {
  padding: 20px 50px;
  font-size: 1.5rem;
  cursor: pointer;
  border: 0;
  color: #fff;
  background: transparent;
  position: relative;
  margin: 20px;
  transition: all .25s;
}

Step 3

Now it's time to handle the pseudo-elements before and after.

button::after,button::before {
  border: 3px solid #fff;
  content: '';
  position: absolute;
  border-radius: inherit;
  width: 100%;
  height: 100%;
  left: 0px;
  bottom: 0px;
  transition: all .25s;
}

In this step, we style the pseudo-elements before and after in exactly the same way: as a frame.

You already see the super trick?

We will simply declare the first element (before) towards the top left, and the second (after) towards the bottom right. We will thus have the impression that our button's borders are duplicating.

Step 4

Let's finish our animation by styling our pseudo-elements on hover.

button:hover::after {
  transform: translate(-5px, -5px);
}

button:hover::before {
  transform: translate(5px, 5px);
}

So, rather magic, right?