ruarhyzh-CNcsdanlenfrkadeeliwitjakoestr

Предлагаем широкий спектр веб услуг по разработке, поддержке и продвижению веб-сайтов.
Гарантируем качество и высокий уровень сдаваемых проектов с 2006 года.

Оформить кнопку можно разными способами, но самый простой - это использование CSS 3.

 

 

<style>
body{
 background-color:#f5f5f5;
 margin:30px;
 text-align:center;
}

#button{
 padding:10px 15px;/*Отступ от границы рамки до текста */
 background-color:#f5f5f5;/*Фон*/
 border:1px solid #DEDEDE;/*Граница кнопки*/
 font:normal 15px "Tahoma";/*Шрифт*/
 color:#8F8F8F;/*Цвет шрифта*/
 cursor:pointer;/*Курсор мыши*/

 /*
 Тень, отбрасываемая текстом в кнопке:
 text-shadow: none | тень
 где тень: [сдвиг по x] [сдвиг по y] [радиус размытия] [цвет]
 */
 text-shadow: 0 1px 0 white;

 /*
 Закругление углов кнопки:
 */
 -moz-border-radius: 5px;
 -webkit-border-radius:5px;
 border-radius: 5px;

 /*
 Градиент:
 linear-gradient(направление наложения градиента, цвет 1, цвет 2)
 Происходит плавный переход от цвета 1 к цвету 2 в заданном направлении.
 */
 background: -webkit-linear-gradient(top, #fff, #EBEBEB);
 background:    -moz-linear-gradient(top, #fff, #EBEBEB);
 background:     -ms-linear-gradient(top, #fff, #EBEBEB);
 background:      -o-linear-gradient(top, #fff, #EBEBEB);
}

#button:hover{

 /*
 Тень вокруг кнопки
 box-shadow: none | тень [, тень]*
 где  тень: inset [сдвиг по x] [сдвиг по y] [радиус размытия] [растяжение] [цвет]
 Значение insert указывается, если нужно создать внутреннюю тень.
 */
 -webkit-box-shadow:0 0 5px 1px #EAEAEA;
 -moz-box-shadow:0 0 5px 1px #EAEAEA;
 box-shadow:0 0 5px 1px #EAEAEA;

 /*
 Градиент
 linear-gradient(направление наложения градиента, цвет 1, цвет 2)
 Происходит плавный переход от цвета 1 к цвету 2 в заданном направлении.
 */
 background: -webkit-linear-gradient(top, #fff, #E0E0E0);
 background:    -moz-linear-gradient(top, #fff, #E0E0E0);
 background:     -ms-linear-gradient(top, #fff, #E0E0E0);
 background:      -o-linear-gradient(top, #fff, #E0E0E0);
}

#button:active{

 -webkit-box-shadow:inset 0 1px 0 1px #B5B5B5;
 -moz-box-shadow:inset 0 1px 0 1px #B5B5B5;
 box-shadow:inset 0 1px 0 1px #B5B5B5;

 background: -webkit-linear-gradient(top, #E3E3E3, #FAFAFA);
 background:    -moz-linear-gradient(top, #E3E3E3, #FAFAFA);
 background:     -ms-linear-gradient(top, #E3E3E3, #FAFAFA);
 background:      -o-linear-gradient(top, #E3E3E3, #FAFAFA);
}
</style>

 <button id="button">CSS кнопка</button>

 


e-mail

All rights reserved. © 2006-2024. При перепечатке текстов, активная, видимая ссылка на TopWebDesign.ru обязательна.

Сайт носит исключительно информационный характер и никакая информация, опубликованная на нём, ни при каких условиях не является публичной офертой, определяемой положениями статьи 437 Гражданского кодекса РФ. Настоящий ресурс может содержать материалы 18+

Продолжая использовать наш сайт, Вы даете согласие на обработку файлов cookies и пользовательских данных, подробнее в нашей Политике Cookie. Если Вы не хотите, чтобы Ваши данные обрабатывались, пожалуйста, покиньте сайт.

Наверх Вниз