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

Кнопки с классным эффектом при наведении CSS

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

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

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

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

1. Вариант идет в 3D стиле:

HTML

Код

<a href="http://zornet.ru/" class="zakolertunim" target="_blank">
<span>ZORNET.RU</span>
</a>

CSS

Код

.zakolertunim {
  display: inline-block;
  margin-top: 19%;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  -webkit-box-shadow: 0 8px 0 #ad2f5f, 0 15px 20px rgba(8, 8, 8, 0.35);
  -moz-box-shadow: 0 8px 0 #c5376d, 0 15px 20px rgba(0, 0, 0, .35);
  box-shadow: 0 8px 0 #b13967, 0 15px 20px rgba(12, 12, 12, 0.35);
  -webkit-transition: -webkit-box-shadow .1s cubic-bezier(0.42, 0, 0.46, 0.95);
  -moz-transition: -moz-box-shadow .1s ease-in-out;
  -o-transition: -o-box-shadow .1s ease-in-out;
  transition: box-shadow .1s cubic-bezier(0.42, 0, 0.36, 0.8);
  font-size: 49px;
  color: #f9f5f5;
}

.zakolertunim span {
  display: inline-block;
  padding: 19px 29px;
  background-color: #ef4686;
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(hsla(338, 86%, 76%, 0.8)), to(hsla(338, 77%, 65%, 0.2)));
  background-image: -webkit-linear-gradient(hsla(338, 90%, 80%, .8), hsla(338, 66%, 63%, 0.2));
  background-image: -moz-linear-gradient(hsla(338, 90%, 80%, .8), hsla(338, 90%, 70%, .2));
  background-image: -o-linear-gradient(hsla(338, 90%, 80%, .8), hsla(338, 90%, 70%, .2));
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  -webkit-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, .15);
  -moz-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, .15);
  box-shadow: inset 0 -1px 1px rgba(255, 255, 255, .15);
  font-family: 'Pacifico', Arial, sans-serif;
  line-height: 1;
  text-shadow: 0 -1px 1px rgba(150, 45, 84, 0.7);
  -webkit-transition: background-color .2s ease-in-out, -webkit-transform .1s ease-in-out;
  -moz-transition: background-color .2s ease-in-out, -moz-transform .1s ease-in-out;
  -o-transition: background-color .2s ease-in-out, -o-transform .1s ease-in-out;
  transition: background-color .2s cubic-bezier(0.42, 0, 0.51, 0.94), transform .1s cubic-bezier(0.42, 0, 0.37, 0.9);
}

.zakolertunim:active, .zakolertunim:focus {
  -webkit-box-shadow: 0 8px 0 #c5376d, 0 12px 10px rgba(0, 0, 0, .3);
  -moz-box-shadow: 0 8px 0 #c5376d, 0 12px 10px rgba(0, 0, 0, .3);
  box-shadow: 0 8px 0 #c5376d, 0 12px 10px rgba(0, 0, 0, .3);
}

.zakolertunim:active span {
  -webkit-transform: translate(0, 4px);
  -moz-transform: translate(0, 4px);
  -o-transform: translate(0, 4px);
  transform: translate(0, 4px);
}

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

2. Второй вариант в прозрачном виде:

HTML

Код

<button class="grumen zornet_ru_gusam_1">ZORNET.RU-1</button>

CSS

Код

.grumen {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 31px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 3px 1px;
  -webkit-transition-duration: 0.5s; /* Safari */
  transition-duration: 0.5s;
  cursor: pointer;
}

.zornet_ru_gusam_1 {
  background-color: #f9f4f4;
  color: #0c0c0c;
  border: 2px solid #439e47;
}

.zornet_ru_gusam_1:hover {
  background-color: #4CAF50;
  color: white;
}

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

3. Третий вариант, что кнопка с тенями:

HTML

Код

<button class="zornet_rusan tumpas">ZORNET.RU № 1</button>

CSS

Код

.zornet_rusan {
  background-color: #4c6caf;
  border: none;
  color: #f3f0f0;
  padding: 12px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 15px;
  margin: 5px 3px;
  cursor: pointer;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
}

.tumpas {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.tumim:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

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

4. вариант, вы можете скачать, гдн все стили и код в текстовом документе, так как иден сразу несколько кнопок с разным элементом функциональности.

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

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

23 Декабря 2017 Загрузок: 1 Просмотров: 1916 Комментариев: (2)

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

СКАЧАТЬ

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

Kosten

Похожие материалы

Оставь свой отзыв

Комментарии: 2
Порядок вывода комментариев: Kosten 29 Декабря 2017 02:30¹ 0 Каскадные таблицы стилей или CSS могут использоваться для создания широкого спектра визуальных эффектов. Например, можно создать кнопку, которая выглядит трехмерным (3D), но на самом деле является чистым текстом. Трехмерный выступающий эффект создается с использованием CSS. В этой статье описываются два способа создания трехмерной текстовой кнопки с использованием CSS без использования какой-либо графики. Как создавать 3D-кнопки с помощью CSS В этой статье предполагается, что у вас есть рабочее знание CSS. Вам не обязательно быть гуру или что-то в этом роде, но вы должны хотя бы иметь базовое понимание CSS, как вставлять CSS-код в свою веб-страницу и применять CSS к различным элементам HTML. Способы создания эффекта 3D-кнопки с помощью CSS Есть, вероятно несколько способов которые вы можете использовать для создания текстовых кнопок, которые выглядят как графические 3D-кнопки с использованием только CSS. В этой статье я опишу два способа. Использование стилей границ «Вставка» и «Внезапная» в CSS Код #tswcssbuttons li a { color: #000 ; background-color: #ffb200 ; border: 1px outset #b37d00 ; width: 180px ; text-decoration: none ; display: block ; } Самый простой способ создания 3D-эффекта для ваших кнопок - использовать средство, предоставляемое CSS для этой цели. Посмотрите на строку " border: 1px outset #b37d00 ;". Он указывает, что кнопка должна быть 1 пиксель толщиной, иметь значение цвета «# b37d00» и иметь свойство «outset». Свойством «outset» для пограничного стиля является то, что кнопка выглядит так, как будто она выступает с веб-страницы. Другими словами, это делает блок похожим на кнопку, которую можно нажать. CSS также имеет другое свойство для границ, называемых «inset», которые, как следует из названия, заставляет кнопку выглядеть так, как будто она нажата. Если у вас есть современный веб-браузер, вы должны увидеть эффект таких свойств CSS в примерах меню на странице мастера веб-меню CSS . Если эффект протрузии или депрессии не очень очевиден в волшебнике, это, вероятно, потому, что я использовал только 1 пиксель для границы. Эффект будет более выраженным, если вы используете более толстую границу (например, 2 пикселя). Вероятно, у вас есть намек на недостаток использования технически правильного свойства CSS для этого эффекта из моего абзаца выше. Очень старые браузеры, такие как Internet Explorer 6 и 7, просто отображают границы начала и вставки, как если бы они были сплошными границами, в результате чего появилась обычная кнопка, которая не выступает с веб-страницы. Однако, поскольку эти браузеры давно вымерли , вам, вероятно, не нужно беспокоиться о них. В любом случае, это всего лишь незначительный визуальный эффект, поэтому даже если ваш сайт имеет случайный отступ от этих браузеров, маловероятно, что они даже заметят что-нибудь. Код color: black ; background-color: #ffb200 ; border: 1px outset #b37d00 ; Как создать кнопку с вставкой или функцией ожидания Очень просто создать трехмерную кнопку со вставкой или исходным свойством. Для любого фрагмента текста, который вы хотите сделать в кнопке, придайте ему некоторый цвет фона и установите пограничный стиль с соответствующим свойством («вставка» или «начало»). Предположим, вы хотите сделать текст «Домой» одним нажатием кнопки. В блоке, содержащем текст, задайте следующие свойства: Код div.button { color: black ; background-color: #9cf ; border-top: 1px solid #c0ffff ; border-right: 1px solid #00f ; border-bottom: 1px solid #00f ; border-left: 1px solid #c0ffff ; } Чтобы он выглядел визуально, как кнопка, ваш цвет границы #b37d00в приведенном выше примере должен быть оттенком вашего фонового цвета, а не каким-либо другим случайным цветом. Самый простой способ сделать это - поэкспериментировать с различными оттенками основного цвета фона для начала. Соответствующие стандарту браузеры будут вычислять правильные цвета для разных сторон вашей кнопки от цвета, который вы поставляете здесь. Kosten 29 Декабря 2017 02:30² 0 Ручное создание 4 границ кнопки для создания эффекта 3D-кнопки Другой способ создания эффекта трехмерной кнопки - это вручную указать цвета для всех четырех границ кнопки. В то время, когда я пишу это, thesitewizard.com использует этот метод для создания эффекта кнопки для своей боковой панели. Давайте посмотрим на код CSS для одной из этих кнопок: Главное, чтобы отметить являются border-top, border-right, border-bottomи border-left стили. Обратите внимание, что верхняя и левая границы имеют тот же цвет, что и нижняя и правая границы. Посмотрите внимательно на эффект, который настройки имеют на кнопках на thesitewizard.com. Нижняя и правая границы темнее, поэтому они выглядят так, как будто эти границы находятся в тени, а верхняя и левая границы ярче, как будто на них светит свет из левого верхнего угла. Конечным результатом является 3D-эффект. Когда вы используете стили «вставки» и «начало» для своих границ (как упоминалось на предыдущем шаге), браузер автоматически заботится о правильных цветах для вас. Здесь, однако, вы делаете все вручную, поэтому вам нужно выяснить, какие цвета лучше всего подходят для создания кнопки, которую вы хотите для своей страницы. Полагаю, талантливые графические художники, возможно, инстинктивно расскажут, какие цвета лучше всего работают, но если вы похожи на меня, вам просто нужно попробовать разные цвета и проверить влияние на своей веб-странице, чтобы найти лучшую комбинацию.