[Статья]

Предисловие :
В данной теме вы не найдете ничего сверхъестественного,я лишь расскажу как сделать красивые кнопки на CSS которые я увидел на одном из форумов сети рунета (в подробности вдаваться не будем..)
Администратор того форума писал в одной из своих тем :

Для желающих узнать, как и что реализовано

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

Ну что ж..Придется потихонечку самому все раскрывать

Результат :






Сама инструкция :

1.Картинку из аттача залить в папку images
2.Админка - стили и шаблоны - основная таблица css - Дополнительные определения CSS
Добавляем..

a.button, button { 
display: inline-block; padding: 5px; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12px; color: #3C3C3D; text-shadow: 1px 1px 0 #FFFFFF; background: #ECECEC url('/images/buttons_bg.png') 0 0 no-repeat; white-space: nowrap; overflow: visible; cursor: pointer; text-decoration: none; border: 1px solid #CACACA; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; outline: none; position: relative; zoom: 1; line-height: 1.11; *display: inline; *vertical-align: middle; 
}
button { margin-left: 0; margin-right: 0; *padding: 5px 5px 3px 5px; }
a.button { -moz-user-select: none; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-user-select: none; -webkit-touch-callout: none;}
button::-moz-focus-inner { border: 0; padding:0px; }
a.button.primary, button.primary { font-weight: bold }
button:focus,a.button:hover, 
button:hover { color: #FFFFFF; border-color: #388AD4; text-decoration: none; text-shadow: -1px -1px 0 rgba(0,0,0,0.3); background-position: 0 -40px; background-color: #2D7DC5; }
a.button:active, button:active,
a.button.active, button.active { background-position: 0 -81px; border-color: #347BBA; background-color: #0F5EA2; color: #FFFFFF; text-shadow: none; }
a.button:active, button:active { top: 1px }

a.button.pill, button.pill { -webkit-border-radius: 19px; -moz-border-radius: 19px; border-radius: 19px; }
a.button.left, button.left { -webkit-border-bottom-right-radius: 0px; -webkit-border-top-right-radius: 0px; -moz-border-radius-bottomright: 0px; -moz-border-radius-topright: 0px; border-bottom-right-radius: 0px; border-top-right-radius: 0px; margin-right: 0px; border-right: none;  }
a.button.middle, button.middle { margin-right: 0px; margin-left: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; border-right: none; }
a.button.right, button.right { -webkit-border-bottom-left-radius: 0px; -webkit-border-top-left-radius: 0px; -moz-border-radius-bottomleft: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; border-bottom-left-radius: 0px; margin-left: 0px; }
a.button.left:active, button.left:active,
a.button.middle:active, button.middle:active,
a.button.right:active, button.right:active { top: 0px }

a.button span.icon, button span.icon { display: inline-block; width: 14px; height: 12px; margin: auto 7px auto auto; position: relative; top: 0; *top: 0px; background-image: url('/images/buttons_post.png'); background-repeat: no-repeat; }

a.button span.icon.edit, button span.icon.edit { background-position: 0 -24px }
a.button:hover span.icon.edit, button:hover span.icon.edit { background-position: 0 -36px }

a.button span.icon.quickreply, button span.icon.quickreply { background-position: 0 -120px }
a.button:hover span.icon.quickreply, button:hover span.icon.quickreply { background-position: 0 -132px }

a.button span.icon.quote, button span.icon.quote { background-position: 0 -72px }
a.button:hover span.icon.quote, button:hover span.icon.quote { background-position: 0 -84px }

a.button span.icon.post_thanks, button span.icon.post_thanks { background-position: 0 -96px }
a.button:hover span.icon.post_thanks, button:hover span.icon.post_thanks { background-position: 0 -108px }

a.button span.icon.blogpost, button span.icon.blogpost { background-position: 0 -48px }
a.button:hover span.icon.blogpost, button:hover span.icon.blogpost { background-position: 0 -60px }

a.button span.icon.kr_reply, button span.icon.kr_reply { background-position: 0 0}
a.button:hover span.icon.kr_reply, button:hover span.icon.kr_reply { background-position: 0 -12px }

a.button.big, button.big { font-size: 16px; padding-left: 14px; padding-right: 17px; }
button.big { *padding: 4px 17px 2px 17px; }

.buttonl {background: url("/images/buttons_bg.png") no-repeat #ececec; border-bottom: 1px solid #cacaca; border-right: 1px solid #cacaca; border-top: 1px solid #cacaca; padding: 5px;}

По традиции идем в админку - управление стилями - ваш стиль - FORUMDISPLAY

Кнопка "Новая тема"
Ищем там

PHP Code:

    <td class="smallfont"><if condition="$show['newthreadlink']"><a href="newthread.php?$session[sessionurl]do=newthread&amp;f=$foruminfo[forumid]" rel="nofollow"><img src="$stylevar[imgdir_button]/newthread.gif" alt="$vbphrase[post_new_thread]" border="0" /></a><else />&nbsp;</if></td> 


Заменяем на

PHP Code:

    <td class="smallfont"><if condition="$show['newthreadlink']"><a class="big pill button" style="margin:0 0 0 20px;" href="newthread.php?$session[sessionurl]do=newthread&amp;f=$foruminfo[forumid]" rel="nofollow"><b title="Новая тема">Новая тема</b></a><else />&nbsp;</if></td> 


Ищем

PHP Code:

    <td class="smallfont"><if condition="$show['newthreadlink']"><a href="newthread.php?$session[sessionurl]do=newthread&amp;f=$foruminfo[forumid]" rel="nofollow"><img src="$stylevar[imgdir_button]/newthread.gif" alt="$vbphrase[post_new_thread]" border="0" /></a><else />&nbsp;</if></td> 


Заменяем на

PHP Code:

    <td class="smallfont"><if condition="$show['newthreadlink']"><a class="big pill button" style="margin:0 0 0 20px;" href="newthread.php?$session[sessionurl]do=newthread&amp;f=$foruminfo[forumid]" rel="nofollow"><b title="Новая тема">Новая тема</b></a><else />&nbsp;</if></td> 


Сохраняем..

Открываем шаблон postbit_legacy

Кнопка "Цитата" в теме..

Ищем

PHP Code:

        <if condition="$post['replylink']">
            <a href="$post[replylink]" rel="nofollow"><img src="$stylevar[imgdir_button]/<if condition="$post['forwardlink']">reply_small<else />quote</if>.gif" alt="$vbphrase[reply_with_quote]" border="0" /></a>
        </if> 


Заменяем на

PHP Code:

        <if condition="$post['replylink']">
            <a class="big pill button" style="margin:0 0 0 20px;" href="$post[replylink]" rel="nofollow"><b title="Цитировать сообщение">Цитата</b></a>
        </if> 


Кнопка "Быстрый ответ" все там же,в postbit_legacy

Ищем

PHP Code:

        <if condition="$show['quickreply'] AND !$show['threadedmode']">
            <a href="$post[replylink]" rel="nofollow" id="qr_$post[postid]" onclick="return false"><img src="$stylevar[imgdir_button]/quickreply.gif" alt="$vbphrase[quick_reply_to_this_message]" border="0" /></a>
        </if> 


Заменяем на

PHP Code:

        <if condition="$show['quickreply'] AND !$show['threadedmode']">
            <a class="big pill button" style="margin:0 0 0 20px;" href="$post[replylink]" rel="nofollow" id="qr_$post[postid]" onclick="return false"><b title="Ответ">Ответ</b></a>
        </if> 


Кнопка "Редактировать" изменить свое сообщение..

Ищем

PHP Code:

            <a href="$post[editlink]" name="vB::QuickEdit::$post[postid]"><img src="$stylevar[imgdir_button]/edit.gif" alt="$vbphrase[edit_delete_message]" border="0" /></a> 


Заменяем на

PHP Code:

            <a class="big pill button" style="margin:0 0 0 20px;" href="$post[editlink]" name="vB::QuickEdit::$post[postid]"><b title="Редактировать">Изменить</b></a> 


Сохраняем..


Открываем шаблон SHOWTHREAD

Кнопка "Ответить" ,а если тема закрыта то кнопка "Закрыто"
Ищем

PHP Code:

        <td class="smallfont"><a href="newreply.php?$session[sessionurl]do=newreply&amp;noquote=1&amp;p=$FIRSTPOSTID" rel="nofollow"><if condition="$show['closethread']"><img src="$stylevar[imgdir_button]/reply.gif" alt="$vbphrase[reply]" border="0" /><else /><img src="$stylevar[imgdir_button]/threadclosed.gif" alt="$vbphrase[closed_thread]" border="0" /></if></a></td> 


Заменяем на

PHP Code:

        <td class="smallfont"><a class="big pill button" style="margin:0 0 0 20px;" href="newreply.php?$session[sessionurl]do=newreply&amp;noquote=1&amp;p=$FIRSTPOSTID" rel="nofollow"><if condition="$show['closethread']"><b title="Ответить">Ответить</b><else /><b title="Закрыто">Закрыто</b></if></a></td> 


Ищем

PHP Code:

        <td class="smallfont"><a href="newreply.php?$session[sessionurl]do=newreply&amp;noquote=1&amp;p=$FIRSTPOSTID" rel="nofollow"><if condition="$show['closethread']"><img src="$stylevar[imgdir_button]/reply.gif" alt="$vbphrase[reply]" border="0" /><else /><img src="$stylevar[imgdir_button]/threadclosed.gif" alt="$vbphrase[closed_thread]" border="0" /></if></a></td> 


Заменяем на

PHP Code:

        <td class="smallfont"><a class="big pill button" style="margin:0 0 0 20px;" href="newreply.php?$session[sessionurl]do=newreply&amp;noquote=1&amp;p=$FIRSTPOSTID" rel="nofollow"><if condition="$show['closethread']"><b title="Ответить">Ответить</b><else /><b title="Закрыто">Закрыто</b></if></a></td> 


Сохраняем..

С вами был no name ака danrik

По аналогу можно и другие кнопочки разукрасить так

удачи

Для ИЕ костыль будет?
ИЕ 9 - углы не круглые.

P.S. Я не люблю эту "тварь", но многие на нем сидят

Sven добавил 04.11.2011 в 16:57
Решение для любителей позаниматься сексом с мозгами
Идем на сайт http://www.curvycorners.net
Качаем архив и заливаем файл curvycorners.js в папку clientscript
Вставляем в конец шаблона headinclude

<script src="clientscript/curvycorners.js" type="text/javascript"></script>

После таких манипуляций ИЕ начнет "понимать" border-radius. По крайней мере у меня заработало. На 6 и смотреть не хочу =/

А можно ссылку на сайт? Хочется в живую посмотреть, а не на скриншотах

Andreyjkee, pcvector.ru

Originally Posted by Sven

Для ИЕ костыль будет?
ИЕ 9 - углы не круглые.

P.S. Я не люблю эту "тварь", но многие на нем сидят

Sven добавил 04.11.2011 в 16:57
Решение для любителей позаниматься сексом с мозгами
Идем на сайт http://www.curvycorners.net
Качаем архив и заливаем файл curvycorners.js в папку clientscript
Вставляем в конец шаблона headinclude

<script src="clientscript/curvycorners.js" type="text/javascript"></script>

После таких манипуляций ИЕ начнет "понимать" border-radius. По крайней мере у меня заработало. На 6 и смотреть не хочу =/

Какой там 6! В 9-м не работает! То есть в FF и Opera все замечательно, но этот, прости меня, Господи, недобраузер, который по незнанию или недоразумению используют еще многие - понимать round-corners отказывается наотрез. Скрипт качал по ссылке, версия 2.1. Может, попробовать более старые?

Originally Posted by Gostemilov

Скрипт качал по ссылке, версия 2.1. Может, попробовать более старые?

я скачивал в тот день когда писал пост, все работало, могу даже скрин показать

Originally Posted by Gostemilov

Какой там 6! В 9-м не работает!

Используйте http://css3pie.com/ (но в 9-ом работает и без него)

Вектор, та же схема, только в твоем случае нужно в стилях указывать путь к файлу, а в том что я писал - только подключить скрипт, он будет обрабатывать бордер-радиус

Опера:

Хром:


Как исправить?