mButton CSS


mButton CSS

931
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 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
  • Winston888 написал:
  • Если бы я не добавлял бесплатные адаптации или скрипты бесплатно я бы наверное не стал бы комментировать ваш материал.
    Последние темы
    Опрос
    203
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 2
    Гостей: 1
    Пользователей: 1
    0
    Сегодня были
    Топ пользователей: