Показать сообщение отдельно
  #4 (permalink)  
Старый 28.08.2015, 23:24
Профессор
Отправить личное сообщение для Decode Посмотреть профиль Найти все сообщения от Decode
 
Регистрация: 31.01.2015
Сообщений: 576

Gera Herbst,
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>JS Bin</title>
  <style>
    .heading {
      margin-top: 6px;
      background: #FFF;
      border-top: 2px solid #EEE;
      border-bottom: 2px solid #EEE;
    }

    .heading a {
      display: block;
      color: #853E29;
      padding: 20px;
    }

    .heading a span {
      display: block;
      float: left;
      background-color: #E14817;
      border-radius: 50%;
      padding: 7px 14px;
      margin-top: -7px;
      margin-right: 10px;
      -webkit-transition: color 0.3s;
      transition: color 0.3s;
      position: relative;
      z-index: 1;
      -webkit-backface-visibility: hidden;
      -moz-osx-font-smoothing: grayscale;
    }

    .heading a span:focus {
      outline: none;
    }

    .heading a span::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: inherit;
      z-index: -1;
      box-shadow: inset 0 0 0 35px #f9e1c4;
      -webkit-transform: scale3d(0.9, 0.9, 1);
      transform: scale3d(1.05, 1.05, 1);
      -webkit-transition: box-shadow 0.3s, -webkit-transform 0.3;
      transition: box-shadow 0.3s, transform 0.3s;
    }

    .heading:hover {
      border-top: 2px solid #E14817;
    }

    .heading:hover span {
      color: #fff;
    }

    .heading a span:hover {
      color: #FFF;
    }

    .heading:hover span:before {
      box-shadow: inset 0 0 0 1px #E14817;
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }

    .heading a span:hover::before {
      box-shadow: inset 0 0 0 1px #E14817;
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  </style>
</head>
<body>
  <div class="heading">
    <a role="button">
      <span>2</span>Configure product
    </a>
  </div>
</body>
</html>
Ответить с цитированием