Красивая кнопка CSS


Красивая кнопка CSS

7835
8.4 из 10
Проголосовало: 25






Презентую Вам красивую кнопку сделанную только при помощи CSS. Делал для своего блога, но увидел, что уже начали рипать, по этому решил не усложнять и без того не простую работу риперов.

И так, приступим.

1) HTML код, вставляете там, где Вам нужно:

Code
<a href="#"><input type="submit" value="Обратная связь с администрацией сайта." class="butfr2"></a>


Как Вы наверное уже заметили - мы присвоили input свой стиль - "butfr2".

2) В свой CSS прописываем следующее.

Code
/* Button by Suglobovwlad (KoT)*/  
  .butfr2 {-moz-transition: all 0.3s ease 0s;-moz-box-sizing: border-  
  box;background: url("/un_images/highlight_buttom2.png") repeat-x scroll center top #ECAE0F;border: 1px solid #F3970C;border-radius: 3px 3px 3px 3px;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.43);color: #FFFFFF;cursor: pointer;display: inline-block;font-family: Calibri,'Trebuchet MS',Verdana,Geneva,Arial,Helvetica,sans-serif;font-size: 12px;font-style: normal;height: 26px;line-height: 26px;outline: medium none;width: 400px;padding: 0 6px;text-align: center;text-shadow: 0 -1px 0 #8CAD36;}  
  a.butfr2 {color: #FFFFFF;display: inline-block;}  
  .butfr2:hover, .button[href]:hover, .buttonProxy:hover .button {background-  
  color: #FAB80E; border: 1px solid #F3970C; color: #FFFFFF;text-decoration: none;}  
  .butfr2:active, .button.ToggleButton.checked, .buttonProxy:active .button  
  {background-color: #ECAE0F; border: 1px solid #F3970C; color: #FFFFFF;outline: 0 none;}  
  /*----------*/


утем редактирование CSS вы можете изменить цвет и размер кнопки.
Автор публикации: Загрузка
Загрузка
KoT1664, это его n материал
Источник: http://up-rip.clan.su
  • Всего комментариев: 12

V@dim
0
V@dim написал: Написано 30 Июня 2013 в 22:22
Комментарий №12
Отличная кнопка

WooFi
+1
WooFi написал: Написано 11 Января 2013 в 22:22
Комментарий №11
Сразу видно, что код новичка.

Зачем использовать input, если это не форма. Из-за неё только лишний тип submit надо использовать. Лучше тогда уж тег button, он то сам расширяется.
Для кнопок с ссылкой разумнее использовать не теги кнопок, а просто стиль для ссылки, благо всё это можно было сделать на CSS2, а с CSS3 так ещё проще, в бэкграунде можно и эту картинку заменить на градиент, и никакой картинки. А :after и :before так вообще "чудеса" творят.

Даже в этом коде достаточно написать для ссылки стиль butfr2, а в тегах ссылки буковки, никакого input'а, и уже всё отображается, менее красиво, но доработать text-decoration, колорит при разных действиях мыши и всё такое не составит труда.

IE9 слава MS способен отображать нормально сайты, а IE 10 так вообще чудо по сравнению с прошлыми версиями. Так что можно не боятся использовать стандарты HTML5 и CSS3, да и jQuery в нём уже так ужасно не виснет.

Ну ладно, для новичка ещё пойдёт. =)

P.S. Пишите вы нормально CSS код, хрен разберёшься в этой строчке. Для читабельности - каждое свойство на новой строке, с отступом.

Сергей
0
Сергей написал: Написано 06 Декабря 2012 в 16:28
Комментарий №10
Хня :/

Supermenыч
0
Supermenыч написал: Написано 05 Декабря 2012 в 13:33
Комментарий №8
а зачем тут стоит width

ST[1]le
0
ST[1]le написал: Написано 05 Декабря 2012 в 13:07
Комментарий №7
Классные кнопки:)Себе поставил

z1MO_ok
0
z1MO_ok написал: Написано 04 Декабря 2012 в 22:03
Комментарий №6
Потому что это "Красивая кнопка на CSS"

FalleN
0
FalleN написал: Написано 06 Декабря 2012 в 10:42
Комментарий №9
так можно же просто кнопку написать, а тут кнопка в ссылке лежит!! как такому быть?

Ромашка:D
0
Ромашка:D написал: Написано 04 Декабря 2012 в 18:03
Комментарий №4
Code
/un_images/highlight_buttom2.png
эммм? а где полная ссылка?

BLAzER
-1
BLAzER написал: Написано 04 Декабря 2012 в 16:58
Комментарий №3
Класс!

BALCETUL
-1
BALCETUL написал: Написано 04 Декабря 2012 в 14:31
Комментарий №2
Они чо такие и есть линой?

Не по тексту размер ставится?

nick
0
nick написал: Написано 04 Декабря 2012 в 19:13
Комментарий №5
вот width: 400px; размер указываеться

Juicy
+2
Juicy написал: Написано 04 Декабря 2012 в 14:28
Комментарий №1
Красивая кнопка.

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
Поставил ваш код он начинает считать от 0 до 100 и останавливаеться. я думал он будет в случайном порядке показывать цыфры
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
    Последние темы
    Опрос
    205
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 6
    Гостей: 5
    Пользователей: 1
    0
    Сегодня были
    Топ пользователей: