Красивая кнопка на чистом CSS3
1554
4.6 из 10
Проголосовало: 3
Проголосовало: 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;}
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;}
Автор публикации: Загрузка
Загрузка
- Всего комментариев: 9
0
|
Такую же кнопку могу на HTML сделать
|
0
|
А как действие задать?
Мне нужно что бы было написано скачать, и кнопка работала. |
+1
|
|
|
0
|
Спасибо..=)
|
0
|
У меня не пашыт (
|
|
0
|
 у меня всё работало! У тебя даже демо в архиве не работает?
|
|
0
|
У меня не чё не работает даже кнопки нету
|
|
0
|
Весь код в любое место поставь...
|
|
0
|
Оп норм
|
- Оставить комментарий:
Меню сайта
Категории
Мини-чат
Последние комментарии
Это моя работа, которая велась давольно таки давно 
Времени было мало, поэтому я скачал полностью все, что было и сделал архив 
Времени было мало, поэтому я скачал полностью все, что было и сделал архив 
Последние темы
Опрос
Статистика
| 0 онлайн |
0 наших |
0 чужих |
0
Сегодня были
Топ пользователей:
| |  |  |  |  |  |
 | |  |  |  |  |
- Обратная связь
- Правила
- RSS
- +18
- Мобильная версия
- Хостинг от uCoz
- Copyright - webo4ka.ru © 2010-2025 г.
- Design by Вовчик Администратор:)