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


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

1103
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 2106
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 430
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • LeKcUs написал:
  • Спасибо... А вот насчет "Но вот баги" можно поконкретнее???
  • CbIPoK2513 написал:
  • Интересная задумка и реализация.. Но вот баги.. А так хорошо.
  • LeKcUs написал:
  • Запомни раз и на всегда... Все файлы ВСЕ с окончанием .swf пишутся в Adobe Flash. Я лично пишу в Adobe Flash CS6 cool Я скоро выложу новый шаблон более интересный...
  • Winston888 написал:
  • Я с флешь не сталкивался поэтому интересно файл main.swf ты сам писал ? Если да то через что ?
  • LeKcUs написал:
  • Я думаю что следующая версия будет по дизайну лучше! Ждите.... cool
    Последние темы
    Опрос
    215
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 8
    Гостей: 6
    Пользователей: 2
    0
    Сегодня были
    Топ пользователей: