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

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

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

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

Примеры:

Красный:

Красная кнопка для сайта

Зеленый:

Установка кнопки:

Там где вам нужно или можно вывести на одну функцию.

Код

<a href="#" class="raz4">ZORNET.Ru - Скрипты для uCoz</a>

CSS:

Код

.raz4 {
  padding: .5em;
  text-decoration: none;
  color: #fff;
  background: no-repeat;
  background-image: linear-gradient(red, red), linear-gradient(red, red), linear-gradient(red, red), linear-gradient(red, red);
  background-size: 2px 0, 2px 0, 0 2px, 0 2px;
  background-position: 0 50%, 100% 50%, 50% 0, 50% 100%;
}
.raz4:active {
  background: #ccc;
}
.raz4:hover {
  transition: .7s;
  background-size: 2px 100%, 2px 100%, 100% 2px, 100% 2px;
  border-radius: 5px;
}

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

Источник: shpargalkablog.ru

25 Апреля 2017 Просмотров: 2144 Комментариев: (7)

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

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

Kosten

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

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

Комментарии: 7
Порядок вывода комментариев: Сопрано 25 Апреля 2017 20:38¹ 0 Кнопок много разных, чтоб не распыляться, вот на DEMO показаны эффекты на многие, что также можете выбрать. Kosten 25 Апреля 2017 20:59² 0 Согласен, что такого типа кнопок много, стараюсь найти простые по установке и эффект у них был приличный. Марковичь 26 Апреля 2017 00:18³ 0 Сопрано, хорошие кнопки, но не сравнивайте с этими, здесь и по другому создано и эффект другой, и мне более понятен этот. Kolinkor 26 Апреля 2017 01:28⁴ 0 Где DEMO что написано в описание? Kosten 26 Апреля 2017 01:35⁵ 0 Просто чтили чистил от лишнего, и забыл прописать обратно ссылку, все исправил, демонстрация установлена. Kolinkor 26 Апреля 2017 01:41⁶ 0 Вот нормально, и кнопочка сама не чего стоящее. Kosten 26 Апреля 2017 01:45⁷ 0 Здесь когда демонстрацию искал, наткнулся на 10 кнопок с эффектом разным, что перенес на текстовой документ, где можете открыть и скопировать, там будет ссылку на DEMO под числа, чтоб понимали, какая кнопка и под какой эффект отвечает. Смотреть стили и код на кнопки