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

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

В этом материале будут кнопки одного дизайн, только при наведение разный эффект, у каждой свой оригинальный. Здесь нет такого, чтоб сказать, вот это да. Все очень просто и сделано на CSS и HTML кода и безусловно подойдет на разный CMC сайта. Красивые кнопки с эффектом всегда на сайте очень стильно смотрятся. И здесь прекрасная подборка их 4 кнопок, где вы можете подобрать под свой интернет ресурс. Все сделано на стилях, что можно задать свой оттенок цвета и закруглить углы, если ваш каркас это позволяет и будут отлично вписаны на портал.

Установка:
1) Устанавливаем кнопку туда, где хотим ее видеть, а точнее, это может быть переход по ссылки или открыть что вам нужно:

Код

<a href="#" class="anim_btn effect">Я кнопка</a>

Теперь нам нужно установить основной стиль в CSS, чтоб была основа.

Код

a.anim_btn:link, a.anim_btn:visited {
  position: relative;
  display: block;
  max-width: 180px;
  width:100%;
  border-radius: 2px;
  margin: 30px auto 0;
  padding: 14px 15px;
  border: 1px solid #F5AB56;
  background: rgba(35, 35, 35, 0.2);
  color: #F5AB56;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  letter-spacing: .08em;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}
a.anim_btn:link:after, a.anim_btn:visited:after {
  content: "";
  position: absolute;
  background: none repeat scroll 0 0 #F5AB56;
  height: 0%;
  left: 50%;
  top: 50%;
  width: 100%;
  z-index: -1;
  -webkit-transition: all .3s ease 0s;
  -moz-transition: all .3s ease 0s;
  -o-transition: all .3s ease 0s;
  transition: all .3s ease 0s;
}
a.anim_btn:link:hover, a.anim_btn:visited:hover {
  color: #393939;
  border: 1px solid rgba(57, 57, 57, 0.56);
  text-shadow: none;
}
a.anim_btn:link:hover:after, a.anim_btn:visited:hover:after {
  height: 420%;
}

Но теперь будем добавлять эффекты, это те же стили.

Первый:

Код

a.anim_btn.effect:after {
  -moz-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
  -ms-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
  transform: translateX(-50%) translateY(-50%) rotate(-45deg);
}

Второй:

Код

a.anim_btn.effect:after {
  -moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
}

Третий:

Код

a.anim_btn.effect:after {
  opacity: .5;
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}
a.anim_btn.effect:hover:after {
  height: 140%;
  opacity: 1;
}

Четвертый:

Код

a.anim_btn.effect:after {
  width: 0%;
  border-radius: 50%;
  opacity: .5;
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}
a.anim_btn.effect:hover:after {
  height: 450%;
  width: 110%;
  opacity: 1;
}

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

Источник: http://dbmast.ru/

23 Марта 2016 Просмотров: 2384 Комментариев: (20)

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

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

Kosten

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

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

Комментарии: 20
Порядок вывода комментариев: Tergran 23 Марта 2016 00:14¹ 0 Кнопки не сказать что уникальные, но на сайт подойдут, и поменять можно цвет, Костен, что сразу не закруглил? Kosten 23 Марта 2016 00:20⁴ 0 Но если бы делал демонстрацию, то сделал по другому. что то от себя добавил, но если они есть, а кто понял, что можно все поменять, то изменит. tsakonter 23 Марта 2016 00:17² 0 А клик делать где, чтоб Demo посмотреть. Kosten 23 Марта 2016 00:19³ 0 Что то запамятовал с демонстрацией, здесь можете посмотреть все эффекты и сами кнопки как оно смотрятся, но нужно полагать, что вы можете изменить оттенок. Angerfist 23 Марта 2016 00:27⁵ 0 Источник другой, internetempire просят ставить источник, почему же сами не ставят что данное решение отсюда. Не собираюсь конфликтовать но так честнее . Kosten 23 Марта 2016 00:33⁶ +1 Angerfist, но если этот реальный источник, не сломает, исправим. Сафрон 23 Марта 2016 00:52⁷ 0 Angerfist, а при чем тут конфликтовать, вы все правильно указали, не вижу не одной причины на какой то даже мелкий конфликт. И в самом материале уже исправлено, мне этот сайт сам нравиться, там по CSS много чего хорошего можно найти. YaVi 23 Марта 2016 01:16⁸ 0 Я просил установить источник? Angerfist 23 Марта 2016 01:25⁹ 0 Спокойствие,только спокойствие) я имел ввиду вы разжевали и описали подробно данный материал, но сами не указали источник и получается вы источник так и пойдёт) Без обид! YaVi 23 Марта 2016 01:31¹⁰ 0 Нее, если я не указал источник, это не значит что это я. Я у себя на сайте, пометил бы, что источник именно я. Kosten 23 Марта 2016 01:36¹¹ 0 YaVi, просто привык, если у вас на сайте материал беру, то основном вы делаете его, здесь просто не посмотрел. Давно говорил, что это запись сильно напрягает, это из той серий, когда школьник требует свой источник, можно же просто написать, источник, вашем случай есть кнопка, не понимаю для чего эта написано, когда все указано. YaVi 23 Марта 2016 01:37¹² 0 Она просто для красоты Kosten 23 Марта 2016 02:07¹⁸ 0 Не идет, как раз красоту эта красная запись на себя берет. Лучше установить скрипт, что вы первый кто прокомментирует, намного красивей будет. Kosten 23 Марта 2016 01:41¹³ 0 Источник был указан с какого го сайта был взят, просто не правильный он был и он исправлен. Angerfist 23 Марта 2016 01:43¹⁴ 0 Я думаю замяли тему) главное что вытащили на свет этот материал и молодцы что подробно расписали, а то издавна люди не хотят вникать в суть кода и ждут когда разжуют что куда и зачем. Сафрон 23 Марта 2016 02:01¹⁷ 0 Но всякое бывает, для того и комментарий, чтоб объяснить, но мне почему то пишут в Лс, так говорю, или пишите в комментариях или создайте тему, но вам все объясню, если в курсе, другой также напишет, а в комментариях для всех будет понятно. Kosten 23 Марта 2016 02:12¹⁹ 0 Также пишут в Лс, но просто в комментарий отправляю, так как может другой отписать и что то свое предложить. Просто люди думаю так быстрей и администратор только и ждет когда ему напишут. Мне вот письмо пришло от роскомнадзора, на кино сайт. Там больше тысячи ссылок и нужно было свою найти, минут 20 потратил, потом взял все скопировал и в текстовом файле по поиску нашел. И что удивительно, фильм а точнее плеер был удален и написано "По просьбе правообладателя" но их не устроило и пришлось сносить полностью. Kosten 24 Марта 2016 21:01²⁰ 0 Но есть такие, кому нужно быстро что то исправить или спросить, не понимая, что отвлекают. Сафрон 23 Марта 2016 01:52¹⁵ 0 У меня с источником было одно приключение. Нашел небольшую статью, где то 2.5k, вообщем скопировал и поставил источник. Где то через неделю получаю на почту письмо, пожалуйста установите ссылку, что при нажатие можно было перейти. Сделал так как попросила дама, установил, но все думаю нормально, и вот получаю письмо, но думаю поблагодарит, а тет, пишет пожалуйста исправить, так как ссылку не видят поисковые системы, там располагается nofollow. Написал ей, что давайте сразу статью напишу и выставлю трастовую ссылку. Но если посмотреть новостные сайты, там также не индексируются а просто ссылаются на источник, не понимаю при чем здесь, должна она быть открыта или закрыта. Kosten 23 Марта 2016 01:57¹⁶ 0 Сафрон, сейчас вообще открытый источник не чего не весит, яндекс будет только учитывать, что ссылаются на ваш сайт и все, у нее веса нет, и на тиц не так сильно повлияет, потому сейчас прогоны профильные, где только ставят ссылку почти не кто не заказывает. А где можно создать свой блог и там в статье написать, это другое дело. Но таких ресурсов очень мало, самый известный это www.cy-pr.com, но вы должны создать свой блог и вести его, а то он долго не продержится.