Время:
Новых сообщений: Нет
Вы на форуме дней
Ваша группа: Гость
Ваш IP: 3.16.203.27
Logical-Portal — молодежный портал со своей изюминкой, каждый сможет найти что-то интересное и полезное для себя, например наш форум общения с которым вам обязательно нужно ознакомиться.
  • Страница 1 из 1
  • 1
mButton CSS
Сообщение оставлено 23.07.2011 в 20:12:21 | Сообщение #1


Вот решил сделать кнопки с помощью css. Может кому пригодиться.
Цвета очень легко изменить
Итак приступим к установке:

1. В самый низ CSSставим коды

Зеленые кнопки

Code
/*Зеленые кнопки*/   
.gbutton {padding: 6px 6px 6px 6px;text-decoration:none;border:1px solid #dddcb9;color:#6e6d55;background:#e5e4c2;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;}   
.gbutton:hover {padding: 6px 6px 6px 6px;font-weight:normal;background:#7da63b;border:1px solid #4a7017;color:#fff;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;}   
   /*Зеленые кнопки*/

Желтые кнопки

Code
/*Желтые кнопки*/   
.eButton {padding: 6px 6px 6px 6px;text-decoration:none;border:1px solid #dddcb9;color:#6e6d55;background:#e5e4c2;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;}   
.eButton:hover {padding: 6px 6px 6px 6px;font-weight:normal;background:#e5d31a;border:1px solid #e8b70f;color:#fff;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;}   
   /*Желтые кнопки*/

Голубые кнопки

Code
/*Голубые кнопки*/   
.bButton {padding: 6px 6px 6px 6px;text-decoration:none;border:1px solid #dddcb9;color:#6e6d55;background:#e5e4c2;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;}   
.bButton:hover {padding: 6px 6px 6px 6px;font-weight:normal;background:#6699cc;border:1px solid #3366cc;color:#fff;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;}   
   /*Голубые кнопки*/

Красные кнопки

Code
/*Красные кнопки*/   
.rButton {padding: 6px 6px 6px 6px;text-decoration:none;border:1px solid #dddcb9;color:#6e6d55;background:#e5e4c2;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;}   
.rButton:hover {padding: 6px 6px 6px 6px;font-weight:normal;background:#ff3333;border:1px solid #cc0000;color:#fff;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;}   
   /*Красные кнопки*/

2. Теперь приступим к оформлению самой ссылки

Code
<a href="#" class="gbutton">Зеленая кнопка</a><br><br>   
   <a href="#" class="eButton">Желтая кнопка</a><br><br>   
   <a href="#" class="rButton">Красная кнопка</a><br><br>   
   <a href="#" class="bButton">Синяя кнопка</a><br><br>

Итак каждой ссылке, которую хотите превратить в кнопку, НУЖНО прописать класс

Code
class="gbutton"

для зеленой кнопки

Code
class="ebutton"

для желтой кнопки

Code
class="rbutton"

для красной кнопки

Code
class="bbutton"

для голубой кнопки

Так же, если хотите изменить кнопки ВВ кодов, то вставьте следующий код в конец CSS

Code

/*ВВ кнопки*/   
   .codeButtons {padding: 6px 6px 6px 6px;text-decoration:none;border:1px solid #dddcb9;color:#6e6d55;background:#e5e4c2;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;}   
   .codeButtons:hover {padding: 6px 6px 6px 6px;font-weight:normal;background:#7da63b;border:1px solid #4a7017;color:#fff;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;}   
   /*ВВ кнопки*/

Ну вот в принципе и все =) Пользуйтесь на здоровье

Источник: fa-minor.mupi.ru
 
 
   
Сообщение оставлено 23.07.2011 в 20:16:54 | Сообщение #2
Сам писал? surprised
Молодец
 
 
   
Сообщение оставлено 23.07.2011 в 20:19:54 | Сообщение #3
TomyDreamer, нет, на то есть источники smile
 
 
   
Сообщение оставлено 23.07.2011 в 20:30:46 | Сообщение #4
супер кнопки спасибо
 
[c][/c]
 
   
Сообщение оставлено 09.09.2011 в 22:58:29 | Сообщение #5
Урааа мои кнопки расходятся))))
 
 
   
Сообщение оставлено 10.09.2011 в 18:46:33 | Сообщение #6
Как на лп =) Спасибо, пригодятся
 
В отпуске
 
   
Сообщение оставлено 11.09.2011 в 11:07:13 | Сообщение #7
Clark, Спасибо пригодятся) поставлю себе
 
 
   
  • Страница 1 из 1
  • 1
Поиск:
 
Графика от: Megas, GraFOS | Дизайн сверстал E.A.
Хостинг от uCoz
Яндекс.Метрика