Discussion on: CSS Animated Button with Offset Border

Great article, welcome to Dev 😊

This looked like a fun challenge so I thought I'd make a quick mock up

Each one is wrapped in a decorative-space div but that's just to make the cool effect from your first gif 😁

I didn't like the way the outline worked with the way I did it so I added my own outline using an iset box-shadow.

.primary-button:focus {
  outline: none;
  color: #396d83;
}

.primary-button:focus .primary-button__text  {
  box-shadow: inset 0 0 0 1px #354a76, 0 0 0 1px #fff;
  border-radius: 4px;
}

Happy Blogging 🎉