A simple concept to make a button "better" is to shift it down by 1px when it's clicked. This is not a new concept, in fact Chris Coyer wrote about it all the way back in 2010.

"Better" is of course a subjective attribute. Typically, websites employ various ":active" states for buttons, such as:

Darkening the button background color
Adding a highlight border color
Using the default 'outline' glow

But not too many websites employ tactile feedback (surprisingly so). I think this subtle visual treatment works best, since research shows that 'movement draws attention'. This has been proven in various studies, like this one: An eye tracking comparison of external pointing cues and internal continuous cues in learning with complex animations. Seeing the button move by 1px can provide a feeling of "It worked! My click did register".

The implementation however can be a little tricky. In Chris Coyer's post, he suggests setting the button's position to "relative" and adding "top: 1px;" on the ":active" state. Here's an example:

.btn {
  position: relative;
  &:active {
    top: 1px;
  }
}

See the Pen Offset buttons using position:relative; by Gabriel Tomescu (@gabrieltomescu) on CodePen.

Although this works, it has drawbacks if the button has a previous "top" offset applied. You'd have to manually offset each button on a case-by-case basis (very painful).

Instead, we can use a transform property, like so:

.btn {
  &:active {
    @include transform(translateY(1px));
  }
}

See the Pen Offset buttons with CSS transform by Gabriel Tomescu (@gabrieltomescu) on CodePen.

From experience, it's likely that buttons will have a previous "absolute" or "relative" position applied, and a "top" offset, in order to be more easily positioned on the page. However, a "transform" property is less likely, hence my suggestion.