ZorNet.Ru — сайт для вебмастера » HTML и CSS » Кнопка с необычным эффектом увеличения CSS

Кнопка с необычным эффектом увеличения CSS

Красиво созданные оригинальные кнопки на CSS всегда привлекали внимание, что представляю четыре варианта на совершенно разных эффектах. Сегодня мы собираемся сделать, что, то необычное на стилях CSS и вернуться к некоторым старым основам. Где рассмотрим одну из многих супер простых кнопок, где элемент будет обладать уникальным эффектом зависания. Если вы новичок, который ищет хороший способ сделать ваши кнопки более интересными, эта статья для вас.

На каждой при наведении всегда ожидаем какой то эффект, это смена палитры или другая анимация, вообще довольно шикарная и в оригинале, но здесь вам будет ждать приятный сюрприз, где каркас станет менять форму для появления нового заголовка.

Идея заключается в том, что у вас простая кнопка с сообщением в нашем примере мы будем использовать надпись. Затем остается навести курсор, где она начнет расти в горизонтальной плоскости, чтобы открыть часть второго сообщения, которое изначально скрыто.

По умолчанию:

Здесь уже в работе, когда нведен клик:ъ

HTML

Код

<a href="http://zornet.ru/" id="asertumolgim" class="mukalisag">Подписаться - на zornet.ru</a>

CSS

Код

#asertumolgim {
  background: #3b5e82;
  border: 2px solid #eee;
  height: 31px;
  width: 115px;
  margin: 37px 0 0 41px;
  padding: 3px 0 0 9px;
  overflow: hidden;
  display: block;
  -webkit-transition: All 0.5s cubic-bezier(0.25, 0.1, 0.18, 0.88);
  -moz-transition: All 0.5s ease;
  -o-transition: All 0.5s ease;
  -ms-transition: All 0.5s ease;
  transition: All 0.5s cubic-bezier(0.25, 0.1, 0.15, 0.88);
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 7px;
  background-image: -webkit-linear-gradient(top, rgba(12, 12, 12, 0.02), rgba(8, 8, 8, 0.22));
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
}

#asertumolgim:hover {
  width: 229px;
}

Давайте посмотрим как работает на демонстраций:

31 Декабря 2017 Просмотров: 1599 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Kosten

Комментарии: 0