Стилизирайте бутон визуално и вземете HTML и CSS, за да го използвате във вашия уебсайт. Започнете с предварително зададен стил, коригирайте типографията, цветовете, формата и сенките, след което прегледайте състоянията на взаимодействие преди експортиране.
Изберете отправна точкаНаправете го по свой собствен начин
Разгледайте 44 предварително зададени стилове в колекциите Everyday, Classic, Shaped, Expressive, Gradients и Elite. Всеки стил е отправна точка, която можете да редактирате.
Как предварително зададените стилове влияят на вашия дизайн
Изберете първо, след това прецизирайте
Използвайте колекцията Style, за да стесните галерията. Прилагането на предварително зададен стил заменя както стиловете по подразбиране, така и тези при посочване с мишката, като същевременно запазва текста на бутона и името на класа.
Опитайте плътно запълване, заоблен ъгъл, ясен контур или по-декоративно третиране. След като намерите посока, използвайте останалите раздели, за да напаснете детайлите към вашата страница.
Направете етикета да изглежда правилно
Задайте текста на бутона, шрифта, размера, дебелината, разстоянието, височината на реда, подравняването и цвета на текста. Вижте как етикетът се актуализира, докато работите.
Прецизирайте текста и разстоянията
Типография, която пасва на действието
Текстът съдържа контролите за шрифта и второ поле за текст на бутона. Размерът на шрифта варира от 10 до 80 пиксела; изброените семейства използват шрифтове, налични на устройството на посетителя.
Използвайте кратък етикет, който описва действието. В Fill, хоризонталното и вертикалното вътрешно отстояние добавят пространство около него, без да променят размера на шрифта. Проверете по-дългите етикети на страницата, където ще се използва бутонът.
Изберете плътно запълване или градиент
Използвайте един цвят за фон или смесете два цвята с линеен градиент. Инструментите за избор на цвят и шестнадесетичните полета ви позволяват да работите визуално или прецизно.
Задайте цветове и посока на градиента
Два цвята, една ясна посока
В Fill променете стила на запълване на Linear gradient, за да разкриете втория цвят и ъгъла на градиента. Ъгълът варира от 0 до 360 градуса.
Шестнадесетичните полета приемат пълен шестцифрен цвят или трицифрен съкратен вариант. Тествайте белия или цветния етикет спрямо двата края на градиента; студиото не сертифицира автоматично контраста на текста.
Контролирайте контура и дълбочината
Регулирайте свързани или независими ъгли, ширина и стил на рамката, сенки на кутията и сенки на текста. Придайте на бутона форма, която подхожда на контекста му.
Изследвайте ъгли, рамки и сенки
От ясен правоъгълник до мека елипса
В Shape дръжте Link all corners включено за един споделен радиус или го изключете, за да зададете всеки ъгъл поотделно. Стиловете на рамката включват плътна, пунктирана, на точки, двойна, вдлъбната, изпъкнала, релефна, жлебовидна и без рамка.
В Shadow задайте хоризонтални и вертикални отмествания, размиване, цвят и непрозрачност. Сянката на кутията има също разпръскване и превключвател за вдлъбване. Сянката на текста е отделна, така че можете да добавите дълбочина към етикета, без да променяте контура на бутона.
Проектирайте и взаимодействието
Редактирайте стиловете Default и Hover поотделно. Прегледайте изгледите Default, Hover и Active, след което сравнете бутона върху светли и тъмни платна.
Разберете състоянията на редактиране и преглед
Два редактируеми стила, три състояния на преглед
Състоянието на редактиране избира кой стил променят вашите контроли. Бутоните за състояние на платното избират само прегледа. Посочването или натискането на прегледа също показва неговото взаимодействие.
Стойностите за Hover, които все още съвпадат с тези по подразбиране, следват базовите редакции, докато не бъдат персонализирани. Експортираният CSS включва правило за посочване, когато е необходимо, контур при фокус, движение при активиране и правило за намалено движение.
Внесете CSS във вашия проект
Копирайте генерирания CSS и съответстващия HTML бутон или изтеглете таблица със стилове. Името на класа поддържа двете части свързани.
Копирайте, изтеглете и запазете работата си
Чист код, който можете да използвате директно
Изберете отличително име на клас, копирайте CSS от неговия раздел, след което копирайте бутона от HTML. Изтеглянето записва .css файл, кръстен на класа; то не изтегля цяла уеб страница.
Прегледът и генерирането на код се изпълняват във вашия браузър. Студиото се опитва да запомни една чернова в локалното хранилище на този браузър; експортирайте всичко, което искате да запазите. Reset връща студиото към началния му стил.
Текст и стилове вътре. HTML и CSS отвън.
Не е необходимо качване. JavaScript захранва редактора на живо във вашия браузър. Копирайте HTML и CSS поотделно или изтеглете CSS таблицата със стилове. Генерираният стек от шрифтове използва шрифтове, налични на устройството на зрителя.
