buttons

by Евгений

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="create-post">
  <button type="button" class="create-button"><i class="post-type-icon fa fa-camera"></i></button>
  <button type="button" class="create-button"><i class="post-type-icon fa fa-youtube-play"></i></button>
  <button type="button" class="create-button"><i class="post-type-icon fa fa-font"></i></button>
  <button type="button" class="create-button"><i class="post-type-icon fa fa-camera"></i></button>
</div>
<div class="create-post">
  <button type="button" class="create-button"><i class="post-type-icon fa fa-camera"></i></button>
  <button type="button" class="create-button"><i class="post-type-icon fa fa-youtube-play"></i></button>
  <button type="button" class="create-button"><i class="post-type-icon fa fa-font"></i></button>
</div>
<div class="create-post">
  <button type="button" class="create-button"><i class="post-type-icon fa fa-font"></i></button>
</div>

SCSS

body {
    background-color: black;
}
.create-post {
  background-color: red;
  display: inline-block;
  border-radius: 45px;
  padding: 0 10px;
  margin: 30px;
}
.create-button {
  background: none;
  border: 0;
  outline: none; 
  font-size: 30px;
  width: 41px;
  height: 44px;
  z-index: 2;
  margin: 0 10px;
  cursor: pointer;
  &:hover {
    background-color: white;
    position: relative;
    color: red;
    &::before {
      content: '';
      position: absolute;
      width: 20px;
      height: 44px;
      border-radius: 22px 0 0 22px;
      left: -20px;
      top: 0;
      background-color: white;
    }
    &::after {
      content: '';
      position: absolute;
      width: 20px;
      height: 44px;
      border-radius: 0 22px 22px 0;
      right: -20px;
      top: 0;
      background-color: white;
      z-index: 1;
    }
  }
}