Кнопка для сайта в стиле минимализм

Кнопка для сайта в стиле минимализм
HTML и CSS 0    187 0

Красивая кнопка со сдвоенной рамкой, которая при наведении трансформируется в единое целое.

HTML разметка


CSS оформление

.min-b {
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #FAFAFA;
}

.min-b button {
  padding: 20px 40px;
  background: none;
  border: none;
  position: relative;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 3px;
  cursor: pointer;
}
.min-b button:after, .min-b button:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border: 2px solid #000;
  transition: -webkit-transform 0.2s;
  transition: transform 0.2s;
  transition: transform 0.2s, -webkit-transform 0.2s;
}
.min-b button:after {
  -webkit-transform: translate(3px, 3px);
          transform: translate(3px, 3px);
}
.min-b button:before {
  -webkit-transform: translate(-3px, -3px);
          transform: translate(-3px, -3px);
}
.min-b button:hover:after, .min-b button:hover:before {
  -webkit-transform: translate(0);
          transform: translate(0);
}


Рекомендую отличный хостинг
Просят от 5 рублей в день
  • PHP 4/5/7, Perl 5, Python, Zend, phpMyAdmin;
  • SSH, sFTP/FTP доступ;
  • Возможность заказа дополнительных IP-адресов;
  • POP3, IMAP, SMTP для работы с почтой;
  • Неограниченное количество доменов и поддоменов;
  • Неограниченный трафик;
  • Автоматическая установка CMS;
  • Управление DNS-записями;
  • И еще много разных ништяков 😉
Протестировать (30 дней бесплатно)

Cмотрю на свой контент и думаю: стал бы я сам делиться им с друзьями?


Похожие статьи:

Подборка слайдеров для сайта на чистом CSS
Градиент для кнопок на сайте
3D текст с мультяшным эффектом на CSS
CSS анимация в стиле рентгена
Верстка блоков со стрелочками
Анимированный фон с плавающими облаками
Красивое оформление 404 страницы
Вертикальное hover hide меню для сайта на HTML и CSS
Стилизация Input File
Стилизация checkbox и radio

Комментарии ()

    Вы должны авторизоваться, чтобы оставлять комментарии.

    Вы можете авторизоваться на сайте через:
    YandexVkontakte