Красивая кнопка на чистом CSS3


Красивая кнопка на чистом CSS3

1113
4.6 из 10
Проголосовало: 3




Она обладает следующими преимуществами:

- Уменьшение размера файла и скорости загрузки страницы;
- Возможность использовать ее столько раз, сколько потребуется без значительных дополнительных изменений (т.е. вы сможете добавить кнопку в вашу библиотеку и использовать ее в различных проектах);
- Автоматическая адаптация ширины кнопку в соответствии с длиной текста.

Установка:

В html:

Code
<button>Кнопка</button>

В css:

Code
/* CSS Document */

button{
color:#08233e;
font:2.4em Arial, ‘Century Gothic’, AppleGothic, sans-serif;
padding:14px;
background:url(http://webo4ka.ru/Ucoz2/krasivaja_knopka_na_chistom_css3.png) repeat-x center #ffcc00;background-color:rgba(255,204,0,1);
border:1px solid #ffcc00;
-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;
border-bottom:1px solid #9f9f9f;
-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
cursor:pointer;
}

button:hover{background-color:rgba(255,204,0,0.8);}

button:active{position:relative;top:2px;}
Автор публикации: Загрузка
Загрузка
Вовчик, это его n материал
  • Всего комментариев: 9

DieHeart
0
DieHeart написал: Написано 27 Июля 2011 в 18:25
Комментарий №9
Такую же кнопку могу на HTML сделать

DJ-VIRGINAL
0
DJ-VIRGINAL написал: Написано 04 Марта 2011 в 21:04
Комментарий №6
А как действие задать?
Мне нужно что бы было написано скачать, и кнопка работала.

Вовчик
+1
Вовчик написал: Написано 04 Марта 2011 в 21:08
Комментарий №7

DJ-VIRGINAL
0
DJ-VIRGINAL написал: Написано 04 Марта 2011 в 22:50
Комментарий №8
Спасибо..=)

GM-DOC
0
GM-DOC написал: Написано 01 Марта 2011 в 14:33
Комментарий №1
У меня не пашыт ( sad

Вовчик
0
Вовчик написал: Написано 01 Марта 2011 в 15:10
Комментарий №2
surprised у меня всё работало! У тебя даже демо в архиве не работает?

GM-DOC
0
GM-DOC написал: Написано 01 Марта 2011 в 15:41
Комментарий №3
У меня не чё не работает даже кнопки нету sad

Вовчик
0
Вовчик написал: Написано 01 Марта 2011 в 15:48
Комментарий №4
Весь код в любое место поставь...

GM-DOC
0
GM-DOC написал: Написано 01 Марта 2011 в 15:53
Комментарий №5
Оп норм happy

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 25
Скрипты и модификации для Ucoz 2110
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • LeKcUs написал:
  • В самый конец просто добавьте вот такие теги... И у Вас не будет больше возникать вопросов! cry

    <!-- </popup> -->$POWERED_BY$<!-- <popup> -->
  • invitesystem написал:
  • Скачал архив, залил сайт, но проблема с кодом для вставки в конструктор шаблонов. Какие-то в нём знаки вопроса и без обязательного $POWERED_BY$
  • Marishka написал:
  • Можно, включите фантазию. Бесплатно никто ничего делать не будет.... Данный скрипт то написали так как попросили happy
  • BLAzER написал:
  • А на условных операторах это не сделать?
  • Вовчик написал:
  • Кто-то недавно об этом спрашивал
    Последние темы
    Опрос
    422
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 6
    Гостей: 6
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: