buttons test

by Grzegorz Matyszewski

HTML

<div class="button">very looong button</div><div class="button">button</div><div class="button">b</div>

SCSS

.button {
  height: 40px;
  padding: 0 15px;
  line-height: 40px;
  font-size: 16px;
  color: white;
  display: inline-block;
  position: relative;
  font-family: sans-serif;
  cursor: pointer;
  margin-right: 10px;
  margin-bottom: 10px;
  
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: black;
    border-radius: 20px;
    z-index: -1;
    transition: transform 0.2s ease-out;
  }
  
  &:hover::before {
    transform: scale(1.1);
  }
}

body {
  background: white url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAMElEQVQoU2NkYGD4z8DAwMiACnwZGBg2IwuhK0BTj+AOsEIMh2Nz6AC7EWfYIUsAAOX6AwtAXhWSAAAAAElFTkSuQmCC);
}