Начало »Новини» Как да подредите бутон форма бутон вход CSS

Как да направите връзка под формата на един бутон, аз написах в предишния пост. Станах необходимо да се изготви формата на бутон (HTML тагове ) Без използването на графики.

buttonSend фон цвят: прозрачен;
фон изображение: URL ( "button.png");
фон-позиция: център център;
фон-повторение: не-повторение;
граница: 0 няма прозрачен;
Цвят: #FFFFFF;
височина: 54px;
подложка: 2px;
ширина: 145px;
>

Това е, което аз го направих.

Как да го направите:
Предвид факта, че сайтът е изграден въз основа на CMS SiteEdit, бутоните в системата са клас CSS buttonSend

1. Трябва да се създаде CSS клас за бутоните:
.buttonSend фон: (. център горния # 5A7994, # 394D63) -moz-линеен градиент повторение превъртане 0 0 прозрачен;
граница: 1px твърдо # 394D63;
граничен радиус: 0.5em 0.5em 0.5em 0.5em;
кутия сянка: 0 1px 2px RGBA (0, 0, 0, 0.2);
цвят: # D9EEF7;
курсора: указател;
езика: вграден блок;
шрифт: 14px / 100% Arial, Helvetica, безсерифен;
марж: 0 2px;
очертае: средна никой;
подложка: 0.5em 2em 0.55em;
текст-приравни: център;
текстови декорация: няма;
текст сянка: 0 1px 1px RGBA (0, 0, 0, 0.3);
вертикално подравняване: изходното ниво;
>

Нека да разгледаме, че в този код.
Ще се създаде градиент фон чрез бутон по подразбиране:
фон: -moz-линеен градиент повторение превъртане 0 0 прозрачен (център горния # 5A7994, # 394D63).
Задайте дебелина, вида и цвета на границата на бутон:
граница: 1px твърдо # 394D63;
Задайте граница бутона радиус:
граничен радиус: 0.5em 0.5em 0.5em 0.5em;
Задайте цвят сянката на бутона:
кутия сянка: 0 1px 2px RGBA (0, 0, 0, 0.2);
Задайте цвят на шрифта:
цвят: # D9EEF7;
Поставете вида на курсора - дланта с показалеца си:
курсора: указател;
Konopka тип единица в реда:
езика: вграден блок;
Шрифтът на бутоните - размера и слушалки:
шрифт: 14px / 100% Arial, Helvetica, безсерифен;
Otsupy между бутона и околните елементи:
марж: 0 2px;
Задайте цвят, стил и дебелината на външната граница на четирите страни на елемента. За разлика от линията, определена от границите, контур имот не засяга позицията на блока и неговата ширина:
очертае: средна никой;
Установява вътрешния подложка от границата на бутона към текста:
подложка: 0.5em 2em 0.55em;
Определете хоризонталното подравняване на текста на бутона:
текст-приравни: център;
Ще се създаде премахване на пейзажа на текста:
текстови декорация: няма;
Ние определяме сянка за текста:
текст сянка: 0 1px 1px RGBA (0, 0, 0, 0.3);
Задайте вертикалното подравняване на текста:
вертикално подравняване: изходното ниво;

Сега, ние трябва да се създаде ефекта с navednii бутон на мишката. Нека да направим градиента малко по-лек:
.buttonSend: мишката фон: -moz-линеен градиент (център горния # 718DA8, # 48627D). повторение превъртане 0 0 прозрачен;
текстови декорация: няма;
>

И накрая, създайте правило за бутона за регистрация е натиснат не е тя - perevernom градиент, променяте цвета на текста и да го оценява с 1 пиксел:
.buttonSend: активен фон: -moz-линеен градиент (. център горния # 394D63, # 5A7994) повторение превъртане 0 0 прозрачен;
цвят: # 80BED6;
позиция: относителна;
отгоре: 1px;
>

Като цяло, това е всичко.

Направете красив и продават на сайта!