mButton CSS

959
7.6 из 10
Проголосовало: 5






Вот решил сделать кнопки с помощью 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;}  
  /*ВВ кнопки*/


Ну вот в принципе и все =) Пользуйтесь на здоровье
Автор публикации: Загрузка
Загрузка
steel, это его n материал
Источник: http://fa-minor.mupi.ru/
  • Всего комментариев: 8

priZrak5206
0
priZrak5206 написал: Написано 22 Июля 2011 в 19:30
Комментарий №7
Себе установил, но переделал, теперь кнопка невидима до наведения!!!
Code

/*Мои кнопки*/  
  .dButton {padding: 6px 6px 6px 6px;text-decoration:none;border:0px solid #dddcb9;color:6e6d55;background:none;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;}  
  .dButton:hover {padding: 6px 6px 6px 6px;font-weight:normal;background:#EDEDEF;border:0px solid #cc0000;color:#000000;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;}  
/*Мои кнопки*/

Класс естественно:
Code
class="dbutton"

Вовчик
0
Вовчик написал: Написано 23 Июля 2011 в 14:22
Комментарий №8
background:none;

Faraon
0
Faraon написал: Написано 22 Июля 2011 в 16:29
Комментарий №4
а класс .mupi зачем?

steel
0
steel написал: Написано 22 Июля 2011 в 17:38
Комментарий №6
Так сказать копирайт =)

Faraon
0
Faraon написал: Написано 22 Июля 2011 в 16:26
Комментарий №3
зачем так много писанины?
когда можно вот так:

Code

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

steel
0
steel написал: Написано 22 Июля 2011 в 17:37
Комментарий №5
Дык, можно и так =) но и как у меня, тоже работает biggrin

steel
0
steel написал: Написано 22 Июля 2011 в 14:44
Комментарий №2
Старался =)

EnErGiZeR71
0
EnErGiZeR71 написал: Написано 22 Июля 2011 в 13:13
Комментарий №1
ууу класно всё получилось ура

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 25
Скрипты и модификации для Ucoz 2115
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
Добрый вечер.Подскажите,пожалуйста: как сделать, чтобы второй или третий набор смайлов заменить своими.
Вы сами себе пишите?
  • CbIPoK2513 написал:
  • Скрипт хорош, уже подстроил свой сайт под него :3
  • gefest35 написал:
  • Супер)))!пасиб за работу!!!
  • sasha2016tv написал:
  • Хороший скрипт
    Последние темы
    Опрос
    442
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 8
    Гостей: 8
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: