mButton CSS

1000
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 2118
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • Marishka написал:
  • Доп 8 станций:
    Код
    <div class="mSt"><p>Tropical</p><div data="2/trop_64">64</div><br><div data="2/trop_128">128</div><br><div data="2/trop_320">320</div></div>  
      <div class="mSt"><p>Нафталин FM</p><div data="2/naft_64">64</div><br><div data="2/naft_128">128</div><br><div data="2/naft_320">320</div></div>  
      <div class="mSt"><p>Rave FM</p><div data="2/rave_64">64</div><br><div data="2/rave_128">128</div><br><div data="2/rave_320">320</div></div>  
      <div class="mSt"><p>Gold</p><div data="2/gold_64">64</div><br><div data="2/gold_128">128</div><br><div data="2/gold_320">320</div></div>  
      <div class="mSt"><p>GOA/PSY</p><div data="2/goa_64">64</div><br><div data="2/goa_128">128</div><br><div data="2/goa_320">320</div></div>  
      <div class="mSt"><p>Minimal/Tech</p><div data="2/mini_64">64</div><br><div data="2/mini_128">128</div><br><div data="2/mini_320">320</div></div>  
      <div class="mSt"><p>House</p><div data="2/fut_64">64</div><br><div data="2/fut_128">128</div><br><div data="2/fut_320">320</div></div>  
      <div class="mSt"><p>Megamix</p><div data="2/mix_64">64</div><br><div data="2/mix_128">128</div><br><div data="2/mix_320">320</div></div>


    Fix работы радио:
    Находим: if(radUrl=="tm" || radUrl=="ps" || radUrl=="teo" || radUrl=="dc")
    Меняем на: if (radUrl == "tm" || radUrl == "ps" || radUrl == "teo" || radUrl == "dc" || radUrl == "gop")
  • CbIPoK2513 написал:
  • Мой вариант выдаёт аватарку картинкой, а не текстом.
  • waak написал:
  • и ещё забыл добавить что использую модуль каталог сайтов
  • waak написал:
  • Почему у меня он перелистывает в верх а не вниз и если это первая песня на стр то он её по кругу гоняет а не переходит к последней
    и как сделать стоп по клику на трек который играет?
  • Acht написал:
  • Тест
    Последние темы
    Опрос
    466
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: