mButton CSS - Форум общения - Logical-portal - Сообщество игроков майнкрафт

Время:

Новых сообщений: Нет
Вы на форуме дней
Ваша группа: Гость
Ваш IP: 18.223.195.127

Logical-Portal — молодежный портал со своей изюминкой, каждый сможет найти что-то интересное и полезное для себя, например наш форум общения с которым вам обязательно нужно ознакомиться.

Страница 1 из 1
1

mButton CSS

Dndz	Сообщение оставлено 23.07.2011 в 20:12:21 \| Сообщение #1

3377

Вот решил сделать кнопки с помощью 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> 
 <a href="#" class="eButton">Желтая кнопка</a> 
 <a href="#" class="rButton">Красная кнопка</a> 
 <a href="#" class="bButton">Синяя кнопка</a>

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

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

Dndz	Сообщение оставлено 23.07.2011 в 20:12:21 \| Сообщение #1
Пользователь Ребенок моё счастье Сообщения: 2324 3377	Вот решил сделать кнопки с помощью 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
	Профиль Цитата Вверх