#25 - Custom button with image on the side

Date: 2018-09-08 12:00 - LESS

A snippet of LESS that styles a simple button with an image on the site with three states (normal, hover, active)

.custom-button {
  user-select: none;
  display: inline-block;
  min-width: 32px;
  min-height: 32px;
  padding-left: 40px;
  padding-right: 8px;
  line-height: 32px;
  border-radius: 6px;
  background: @primary-color;
  position: relative;
  color: white;
  font-weight: bold;
  margin: 0 5px;
  cursor: pointer;

  &:before {
    position: absolute;
    left: 3px;
    display: block;
    content: "";
    width: 32px;
    height: 32px;
    background: url("/images/snippets/button.svg") no-repeat;
    background-position-y: -7px;
  }

  &:hover:before {
    background-position-x: -32px;
  }

  &:active:before {
    background-position-x: -64px;
  }
}

Example:

Previous snippet | Next snippet