Группа кнопок в стиле MDesign

by Andrey Dobrovoi

HTML

<div class="container">
  <div class="floaty">
    <ul class="floaty-list">
      <li class="floaty-list-item">
        <span class="floaty-list-item-label">Обезьянка Barack</span>
        <img src="http://goo.gl/ONWOzq" alt="" />
      </li>
      <li class="floaty-list-item">
        <span class="floaty-list-item-label">Тупица George</span>
        <img src="http://goo.gl/F5yGOp" alt="" />
      </li>
      <li class="floaty-list-item">
        <span class="floaty-list-item-label">Клоун Bill</span>
        <img src="http://goo.gl/Bt5ikO" alt="" />
      </li>
      <li class="floaty-list-item floaty-list-item--blue">
        <span class="floaty-list-item-label">Напомнить</span>
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" class="absolute-center">
            <path d="M0 0h24v24h-24z" fill="none"/>
            <path d="M22 5.72l-4.6-3.86-1.29 1.53 4.6 3.86 1.29-1.53zm-14.12-2.33l-1.28-1.53-4.6 3.85 1.29 1.53 4.59-3.85zm4.62 4.61h-1.5v6l4.75 2.85.75-1.23-4-2.37v-5.25zm-.5-4c-4.97 0-9 4.03-9 9s4.02 9 9 9c4.97 0 9-4.03 9-9s-4.03-9-9-9zm0 16c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"/>
        </svg>
      </li>
      <li class="floaty-list-item floaty-list-item--yellow">
        <span class="floaty-list-item-label">Поделиться</span>
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" class="absolute-center">
            <path d="M19 3h-14.01c-1.1 0-1.98.9-1.98 2l-.01 14c0 1.1.89 2 1.99 2h14.01c1.1 0 2-.9 2-2v-14c0-1.1-.9-2-2-2zm0 12h-4c0 1.66-1.34 3-3 3s-3-1.34-3-3h-4.01v-10h14.01v10zm-3-5h-2v-3h-4v3h-2l4 4 4-4z"/>
            <path d="M0 0h24v24h-24z" fill="none"/>
        </svg>
      </li>
    </ul>
    <div class="floaty-btn">
      <span class="floaty-btn-label">
        Редактировать
      </span>
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="floaty-btn-icon floaty-btn-icon-plus absolute-center">
          <path...

CSS

/* Стили демо блока - вам это не нужно */
body {
  font-family: 'Roboto', sans-serif;
}
.container {
  position: relative;
  background-color: #e0e0e0;
  margin: 25px auto 0;
  height: 400px;
  width: 500px;
}

/* Комплектующие стили - это то, что вам нужно */
.absolute-center {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}
.floaty {
  position: absolute;
  bottom: 15px;
  right: 15px;
}
.floaty-list {
  margin: 6px 10px;
  padding: 0 6px 0 0px;
  list-style: none;
  opacity: 0;
  float: left;
  transition: opacity .2s ease-out;
}
.floaty:hover .floaty-list {
  opacity: 1;
}
.floaty-list-item {
  position: relative;
  width: 40px;
  height: 40px;
  margin: 0 5px;
  float: right;
  cursor: pointer;
  background-color: #f0f0f0;
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0,0,0,.25);
}
.floaty-list-item > img {
  border-radius: 50%;
}
.floaty-list-item--yellow {
  background-color: #d4a717;
}
.floaty-list-item--yellow > svg {
  fill: #fff;
}
.floaty-list-item--blue {
  background-color: #3c80f6;
}
.floaty-list-item--blue > svg {
  fill: #fff;
}
.floaty-list-item-label {
  position: absolute;
  top: -30px;
  right: 0;
  padding: 4px 8px;
  font-size: 14px;
  color: #fff;
  background-color: #424242;
  border-radius: 2px;
  opacity: 0;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity .2s ease-out;
}
.floaty-list-item:hover > .floaty-list-item-label {
  opacity: 1;
}
.floaty-btn {
  position: relative;
  width: 56px;
  height: 56px;
  float: right;
  margin-right: 15px;
  cursor: pointer;
  background-color: #DB4437;
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0,0,0,.25);
}
.floaty-btn:hover .floaty-btn-label {
  opacity: 1;
}
.floaty-btn-label {
  position: absolute;
  top: -30px;
  right: 0;
  padding: 4px 8px;
  font-size: 14px;
  color: #fff;
  background-color: #424242;
  border-radius: 2px;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  transition: opacity .2s...

JavaScript

var $floaty = $('.floaty');

$floaty.on('mouseover', function() {
  $floaty.addClass('is-active');
});

$floaty.on('mouseout', function() {
  $floaty.removeClass('is-active');
});