Бутони, CSS - примери

Съществуват няколко вида на входа, за да създадете един бутон и бутона на маркера [тип = "бутон | нулиране | представят"]. Тя изглежда и функционира те са абсолютно идентични.

Кога да използвате бутона маркер?
  • бутон има отвор и затварящия маркер, означава, че той може да съдържа дъщерни маркера
  • когато текстът на един бутон, а стойността на стойност да се предава, когато кликнете върху друг.

Как да си направим един бутон на СГО

От изгнание, етикет педя или Разделение можете да правите с CSS е много хубаво бутон.







Създаване на бутон, "Трябва ли да промените външния вид на един бутон, когато се движите или да натиснете бутона ефект?"

Трябва да призная, че най-трудно да разбера как да се държим по време на натискане на бутон.

Понякога най-прост вид може да изглежда по-стилен от фантазия с готини бутон ефекти. Вижте как тя веднага [cssdeck.com] изглежда.

бутон градиент

Наклоните са трудни за анимация, гладка промяна на цвета на фона. Какво да се прави? Отговор: кутия сянка [кликнете върху линка, има супер-шикозен форма на входа].

Но всеки ход работата по ура.

Доста популярно разделение на бутоните на двуцветен

Тя е в CSS, но все още можете да добавите малко скрипт. Сегур Как Обичам този блог. Този сайт е дълго време в моите "златни" раздели!

За височина сложно. Можете да зададете на същата височина и линия-височина, но линията височината не се поддържа от някои мобилни браузъри, например Opera Mini. Напълно премахване на уплътнение.

бутон, ако имате намерение за много страници - "как да промените WordPress шаблон". За бутони или връзки във файла PHP се добавя към този клас, например, клас = "button16". А стил - във файла .css, например,
.button16

ако за една страница, трябва да има един бутон, за да отидете на раздела "HTML" Режимът при писане / редактиране на статии. В мястото си, като добавите стилове и бутон. Само в този случай трябва да бъдат сигурни, да влезе вътре стилове

фон: RGB (206, 220, 231) линеен градиент (RGB (206,220,231), RGB (89106114));

фон цвят: RGB (206, 220, 231);
фон изображение: линеен градиент (RGB (206,220,231), RGB (89106114)); Medoti Dorf Добре дошли, благодаря ти за статията!
ще ви покаже как да се направи един бутон по ширината на блока?
a.knopka цвят: #fff; / * Цвят на текста * /
текстови декорация: няма; / * Премахване на подчертаването от връзки * /
потребителя изберете: няма; / * Премахване на избора на текст * /
фон: RGB (212,75,56); / * На фона на бутона * /
уплътнение. 7em 1.5em; / * Допълване на текста * /
очертае: няма; / * Премахване на примката в Mozilla * /
>
a.knopka: мишката / * Когато задържите курсора на мишката * /
a.knopka: активно / * Чрез натискане * / NMitra Здравейте!

Талия Screen Orizzontale

Анонимен Благодаря ви за копчета - изглежда супер. Анонимен Помогна в работата за начинаещи.
Въпреки това, тъй като, за да центрирате текста по отношение на иконата, която се намира в предната част на бутона
височина: 40px; (Бутони Н)
Онлайн-височина: 40px; (Neznamov това, но ако бутона е на същата височина, тъй като текстът да бъде изравнен с височина спрямо иконите в ляво)
Само разбрах, чрез четене на форума, че е необходимо, че височина = линия височината

Сега прочетете отново отново в търсене на това как да се премахне подчертаването.

Много просто не разполагат с достатъчно подробно описание, параметър, това означава.

Всяка комбинация от функционални думи се опита, но да се разбере и не можеше.

Можете да разберете това. В предварително благодаря ви много!

a.button_main_ico поплавъка: ляво;
ширина: 200px;
височина: 24px;
шрифта: 16px;
шрифт: Verdana, Arial, Helvetica;
текст-приравни: център;
граница: няма;
граничен радиус: 6 пиксела;
цвят: # F8F8F8;
фон-цвят: # 3895EA;
текстови декорация: няма;
очертае: няма;
потребителя изберете: няма ;;
преход: 0.2S;
>
a.button_main_ico: мишката фон-цвят: #BABABA;
>
a.button_main_ico: фокус фон-цвят: # D8D8D8;
>
a.button_main_ico: фокус: мишката фон-цвят: #DFDFDF;
>

a.button_main_ico: преди съдържание: URL (../ ico_L_ready.png);
> NMitra добавите иконата с помощта на: преди? Тогава ще трябва да заобикалят текст педя. преди и педя зададете вертикално подравняване: средна;

a.button_main_ico: преди,
съдържание a.button_main_ico педя: URL (../ ico_L_ready.png);
вертикално подравняване: средна;
>

Благодарим Ви за участието и дадена посока.

За отговор и посока, благодарение на много. NMitra височина определена фиксирана височина: 24px; Anonymous, обаче, намерих отговора, който дойде при мен.

към HTML
Бутон с икона и текста подравнен в средата на бутона:
бутон

(Думата "клас" - променено на английски и тогава няма да се отпечата)

В CSS
a.button_main поплавъка: ляво;
ширина: 200px;
височина: 24px;
шрифта: 16px;
шрифт: Verdana, Arial, Helvetica;
текст-приравни: център;
граница: няма;
граничен радиус: 6 пиксела;
цвят: # F8F8F8;
фон-цвят: # 550000;
текстови декорация: няма;
очертае: няма;
потребителя изберете: няма ;;
преход: 0.2S;
>
a.button_main: мишката фон-цвят: # BA0000;
>
a.button_main: фокус фон-цвят: # D80000;
>
a.button_main: фокус: мишката, a.button_history: фокус: мишката фон-цвят: # DF000;
>

ico_name фон изображение: URL (../ ico_name.png);
фон-повторение: не-повторение;
езика: вграден блок;
вертикално подравняване: средна;
ширина: 24px;
височина: 24px;
фон-позиция: 0px -1px;


Тук доволен, че бутон клас, за да се отървете от този клас икона. Така че ние използваме един клас за всички бутони за кандидатстване и единствените класове промени, тъй като са необходими икони.