О нас Форум Баннеры RSS картинка Нас уже 577, Присоединяйся
Пожаловаться

Презентую вам три красивые кнопки сделанную только при помощи CSS.
Чёрная, желтая и зелёная кнопки отлично будут смотреться на любых дизайнах


И так, приступим.

1) Выбираем нужную для вас кнопку, а возможно и все сразу:

HTML код для чёрной кнопки:
Code
<a href="http:/load/20-1-0-295"><input value="Чёрная кнопка" class="butfr2 blackur" type="submit"></a>


Для зелёной кнопки:
Code
<a href="http:/"><input value="Зелёная кнопка" class="butfr2 greenur" type="submit"></a>


Для жёлтой кнопки:
Code
<a href="http:/"><input value="Желатя кнопка" class="butfr2 oranger" type="submit"></a>


2) Добавляем в Таблицу стилей(CSS) в конец этот код:
Code
/* Button by Rikudo*/  
.butfr2 {-moz-transition: all 0.3s ease 0s;-moz-box-sizing: border-box;border-radius: 3px 3px 3px 3px;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.43);color: #FFFFFF;cursor: pointer;display: inline-block;font-family: Calibri,'Trebuchet MS',Verdana,Geneva,Arial,Helvetica,sans-serif;font-size: 12px;font-style: normal;height: 26px;line-height: 26px;outline: medium none;width: 400px;padding: 0 6px;text-align: center;}
a.butfr2 {color: #FFFFFF;display: inline-block;}  

.blackur {background: url("http:/serv/img/highlight_buttom2.png") repeat-x scroll center top #323232;text-shadow: 0 -1px 0 #2B2B2B;border: 1px solid #2B2B2B;}
.blackur:hover {background-color: #555;color: white;text-decoration: none;}
.blackur:active {background-color: #242424;color: #FFFFFF;outline: 0 none;}

.greenur {background: url("http:/serv/img/highlight_buttom2.png") repeat-x scroll center top #7BA60D;text-shadow: 0 -1px 0 #8CAD36;border: 1px solid #54951F;}
.greenur:hover {background-color: #6C910C; border: 1px solid #54951F; color: #FFFFFF;text-decoration: none;}
.greenur:active {background-color: #6C910C; border: 1px solid #54951F; color: #FFFFFF;outline: 0 none;}

.oranger {background: url("http:/serv/img/highlight_buttom2.png") repeat-x scroll center top #ECAE0F;text-shadow: 0 -1px 0 #8CAD36;border: 1px solid #F3970C;}
.oranger:hover {background-color: #FAB80E; border: 1px solid #F3970C; color: #FFFFFF;text-decoration: none;}  
.oranger:active {background-color: #ECAE0F; border: 1px solid #F3970C; color: #FFFFFF;outline: 0 none;}
/* Button by Rikudo*/


Или можете добавить рядом с кодом кнопки эту строчку:
Code
<link type="text/css" rel="StyleSheet" href="http:/serv/css/button.css">


3) Вы можете менять ширину кнопки, для этого вы должны изменять следующую часть кода:
width: 400px;

Например в 2 раза меньше width: 200px;
А можно на всю длину блока растянуть так: width: 100%;

Готово, удачи


Спонсор :



Источник: http://unaruto.ru
Всего голосов: ... | ... | ...

Всего комментариев: 3
Hаписал: Mihail , 14.12.2012 Пятница 16:54 Сообщение #1
Mihail
OFFLINE
+ 2 -

Красивые кнопки, согласен.

Hаписал: MeVeR , 14.12.2012 Пятница 18:50 Сообщение #2
MeVeR
OFFLINE
+ 1 -

Ну это просто супер)) Я себе установил смотря тааак красиво :)

Hаписал: Kulac , 18.12.2012 Вторник 19:07 Сообщение #3
Kulac
OFFLINE
+ 0 -

Кнопки хороши

Информация


Посетители, находящиеся в группе Гость, не могут оставлять комментарии к данной публикации.
Пожалуйста войдите на сайт как пользователь или зарегистрируйтесь.

Логотип сайта:
Навигация
Мини-чат
Витрина Активистов
Опрос
Нужно ли модернизировать сайт?

Всего ответов: 205
Последние комментарии
  • Fatal1ti
    Оставлен 05.02.2013
    50+ качественных анимированных иконок загрузки для сайта
    Автор комментария: Fatal1ti
    Оставлен 05.02.2013 в 16:19
    Тема: 50+ качественных анимированных иконок загрузки для сайта
    Это просто gif картинки,
    А чтобы при загрузке страницы крутилась анимация, нужен скрипт
  • sasha26
    Оставлен 04.02.2013
    Новый, светлый мини-чат как на Zagruzka-Plus для uCoz
    Автор комментария: sasha26
    Оставлен 04.02.2013 в 12:43
    Тема: Новый, светлый мини-чат как на Zagruzka-Plus для uCoz
    С цветами разобрался, пришлось путь к файлу zvetaf.xml полностью писать.
  • sasha26
    Оставлен 04.02.2013
    Новый, светлый мини-чат как на Zagruzka-Plus для uCoz
    Автор комментария: sasha26
    Оставлен 04.02.2013 в 12:32
    Тема: Новый, светлый мини-чат как на Zagruzka-Plus для uCoz
    Что-то окно с цветами начинает открываться и сразу же пропадает.
    А как можно чат растянуть по высоте с 300рх до 500рх, где это меняется?
  • Mihail
    Оставлен 01.02.2013
    Замена alert на ajax окно с прямой ссылки к сообщению на форуме
    Автор комментария: Mihail
    Оставлен 01.02.2013 в 17:12
    Тема: Замена alert на ajax окно с прямой ссылки к сообщению на форуме
    А вот это супер )
  • Fatal1ti
    Оставлен 31.01.2013
    Форма добавления комментариев как на dle для uCoz
    Автор комментария: Fatal1ti
    Оставлен 31.01.2013 в 18:23
    Тема: Форма добавления комментариев как на dle для uCoz
    Должно работать, у некоторых файл zvetaf.xml
    Повреждается при загрузке, попробуй его перезалить

    Если ничего не изменяется, то ищи в коде такую строчку:
    Код
    <img src="http:/bbcodes/color.gif" id="kmn" title="Выбрать цвет" onclick="openLayerB('sda',0,'/bbcodes/zvetaf.xml','Выбор цвета',190,200,'1','','',0,'justify');return false;">


    И меняй на эту:
    Код
    <script type="text/javascript" src="http:/serv/zvet.js"></script>
    <img src="http:/bbcodes/color.gif" id="kmn" title="Выбрать цвет" onclick="viewzvet()">

    Должно заработать..
  • Fatal1ti
    Оставлен 27.01.2013
    Зелёное меню как на we-place для uCoz
    Автор комментария: Fatal1ti
    Оставлен 27.01.2013 в 15:05
    Тема: Зелёное меню как на we-place для uCoz
    DevilShadow, извини что сразу не ответил
    Чтобы счетчики были справа нужно в css найти такую строчку:
    Код
    .coole div {position: relative;margin-left: 173px;z-index: 1;}

    И заменить на эту
    Код
    .coole div {position: relative;margin-left: 219px;z-index: 1;}


    А чтобы и фото счетчик был, нужно после этой строчки:
    Код
    <script type="text/javascript" src="http://worldinfo.my1.ru//informer/6"></script>

    Добавить эту:
    Код
    <script type="text/javascript" src="http://worldinfo.my1.ru//informer/7"></script>


    И после скрипта, который находится снизу после меню, добавь ещё скрипт:
    Код
    <script type="text/javascript">  
      function setCatNumEnt(){  
      if(!window.uCatsOut)return;  
      $('div.naviglot a').each(function(){  
      var a=this,ah=a.href,cArr=window.uCatsOut;  
      if(!/\/photo\//.test(ah))return;  
      var t=ah.split('/'),id=t[t.length-1]||t[t.length-2],a=$(a).parent();  
      if(!isNaN(id)){  
      $.each(cArr,function(j){  
      if(cArr[j][0]==id){  
      a.prepend('</span><div class="coole"><div><span class="vnav-subnav2">'+cArr[j][6]+'</span></div></div>');  
      }  
      });  
      };  
      });  
      };setCatNumEnt();
      </script>
Статистика
Онлайн всего: 1
Гостей: 1
Пользователей: 0

Сегодня зашли на сайт
0 пользователя

Новых пользователей:
За месяц: 17
За неделю: 6
Вчера: 0
Сегодня: 0
У нас нашли
Загрузка...
Друзья сайта
Наш Баннер
Всё для новичков
Всё для новичков