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


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

1091
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 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
    чужих
    Онлайн всего: 4
    Гостей: 3
    Пользователей: 1
    Топ пользователей: