Регистрация    Войти
Авторизация

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

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


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

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

1) HTML код, вставляете там, где Вам нужно:
<a href="www.manucoz.ru"><input type="submit" value="Обратная связь с администрацией блога." class="butfr2"></a>


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

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

/* Button by Rikudo*/
.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 вы можете изменить цвет и размер кнопки.

Есть вопросы по шаблону или скрипту? так задай их и мы ответим!

Автор: haard  28-11-2012, 22:57   Просмотров: 2976   
rikudo, button, css, ксс, кнопка
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо зайти на сайт под своим именем.

Пользователь offline nerush_kokshetau 1 января 2013 19:03
Забыли фон кнопки, поэтому не работает, + не заслужили

          1

Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.