Головна »Новини» Як красиво оформити кнопку форми input css button
Як оформити посилання у вигляді кнопки, я вже писав в попередніх постах. У мене виникла необхідність оформити кнопку форми (тег html ) Без використання графіки.
buttonSend background-color: transparent;
background-image: url ( "button.png");
background-position: center center;
background-repeat: no-repeat;
border: 0 none transparent;
color: #FFFFFF;
height: 54px;
padding: 2px;
width: 145px;
>
Ось що у мене вийшло.
Як це зробити:
З урахуванням того, що сайт створений на CMS SiteEdit, то кнопки в цій системі мають клас css buttonSend
1. Необхідно створити клас css для кнопок:
.buttonSend background: -moz-linear-gradient (center top. # 5A7994, # 394D63) repeat scroll 0 0 transparent;
border: 1px solid # 394D63;
border-radius: 0.5em 0.5em 0.5em 0.5em;
box-shadow: 0 1px 2px rgba (0, 0, 0, 0.2);
color: # D9EEF7;
cursor: pointer;
display: inline-block;
font: 14px / 100% Arial, Helvetica, sans-serif;
margin: 0 2px;
outline: medium none;
padding: 0.5em 2em 0.55em;
text-align: center;
text-decoration: none;
text-shadow: 0 1px 1px rgba (0, 0, 0, 0.3);
vertical-align: baseline;
>
Давайте розберемо що в цьому коді.
Встановимо градієнт фону кнопки за замовчуванням:
background: -moz-linear-gradient (center top. # 5A7994, # 394D63) repeat scroll 0 0 transparent;
Встановимо товщину, тип і колір кордону кнопки:
border: 1px solid # 394D63;
Встановимо радіус кордону кнопки:
border-radius: 0.5em 0.5em 0.5em 0.5em;
Встановимо колір тіні кнопки:
box-shadow: 0 1px 2px rgba (0, 0, 0, 0.2);
Встановимо колір шрифту:
color: # D9EEF7;
Встановимо тип курсора - долонька з вказівним пальцем:
cursor: pointer;
Тип Конопки блок в лінію:
display: inline-block;
Шрифт для кнопки - розмір і гарнітура:
font: 14px / 100% Arial, Helvetica, sans-serif;
Отсупи між кнопкою та оточуючими елементами:
margin: 0 2px;
Встановимо колір, стиль і товщину зовнішнього кордону на всіх чотирьох сторонах елементу. На відміну від лінії, що задається через border, властивість outline не впливає на положення блоку і його ширину:
outline: medium none;
Встановимо внутрішній відступ від кордонів кнопки до тексту:
padding: 0.5em 2em 0.55em;
Встановимо горизонтальне вирівнювання тексту кнопки:
text-align: center;
Встановимо скасування декорації тексту:
text-decoration: none;
Задамо тінь для тексту:
text-shadow: 0 1px 1px rgba (0, 0, 0, 0.3);
Встановимо вертикальне вирівнювання тексту:
vertical-align: baseline;
Тепер, нам потрібно створити ефект при наведніі мишки на кнопку. Зробимо градієнт трохи світліше:
.buttonSend: hover background: -moz-linear-gradient (center top. # 718DA8, # 48627D) repeat scroll 0 0 transparent;
text-decoration: none;
>
І, нарешті, створимо правило для оформлення кнопки при натисканні НЕ неї - перевернемо градієнт, змінимо колір тексту і кошторис її на 1 піксель:
.buttonSend: active background: -moz-linear-gradient (center top. # 394D63, # 5A7994) repeat scroll 0 0 transparent;
color: # 80BED6;
position: relative;
top: 1px;
>
В общем-то і все.
Робіть гарні і продають сайти!