ZorNet.Ru — сайт для вебмастера » HTML и CSS » Анимационная кнопка с помощью CSS

Анимационная кнопка с помощью CSS

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

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

Все можно сделать это без использования JavaScript - только HTML и CSS:

HTML

Код

<div class="zornet_ru_gwrsa dekavtum" style="cursor:pointer;">ZORNET.RU</div>

CSS

Код

.zornet_ru_gwrsa {
  float: left;
  margin: 3em 1.5em;
  width: 99px;
  height: 58px;
  border: 2px solid #043a04f0;
  color: #efe9e9f5;
  border-radius: 3px;
  background-color: #1d8662;
  line-height: 58px;
  text-align: center;
  -webkit-transition: 1s ease-in-out;
  -moz-transition: 1s ease-in-out;
  -o-transition: 1s ease-in-out;
  transition: 1s cubic-bezier(0.42, 0, 0.39, 0.88);
}
  .zornet_ru_gwrsa.dekavtum:hover {
  -webkit-transform: translate(3em,0);
  -moz-transform: translate(3em,0);
  -o-transform: translate(3em,0);
  -ms-transform: translate(3em,0);
  transform: translate(3em,0);
  }

PS - Если вы считаете, что это круто, где анимация CSS может применяться не только к преобразованиям, но также и к другим свойствам CSS, включая непрозрачность и цвет, а также множество других элементов.

Демонстрация:

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

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

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

Kosten

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