Този пример използва само контролите на генератора. Изображенията по-горе показват действително изтеглени стилови листове, приложени към обикновени HTML бутони, а не екранни снимки на редактора.
Отворете CSS Генератора на бутони
Започнете с Signature
Отворете CSS Генератора на бутони. В „Предварителни настройки“ изберете Signature от колекцията Everyday. Задайте текста на бутона на „Get started“. В областта за код задайте име на класа cta-button.
Предварителната настройка заменя стиловете по подразбиране и при посочване, докато вашият етикет и име на клас остават. Изберете началната си точка, преди да правите подробни корекции.
Името на класа свързва правилата на CSS с вашия HTML бутон. Генераторът изчиства неподдържаните знаци; използвайте кратко, отличително име, за да избегнете стилизиране на несвързани елементи.
Създайте градиентното „хапче“
Задръжте състоянието на редактиране на Default (По подразбиране). В Text изберете System sans, размер на шрифта 18 px и тегло Bold. Запазете белия цвят на текста, нормален стил, центрирано подравняване и височина на реда 1.4.
В Fill изберете Linear gradient. Използвайте двата цвята и ъгъла по-долу. Задайте хоризонтално разстояние 32 px и вертикално разстояние 16 px. В Shape оставете Link all corners включено и задайте радиус на ъгъла 100 px. Ширината на границата остава 0 px.
В Shadow оставете Box shadow включено. Използвайте хоризонтално отместване 0 px, вертикално отместване 8 px, размиване 24 px, разпръскване −4 px, цвят #460BD8 и непрозрачност 32%. Оставете Inset shadow и Text shadow изключени.
Разстоянието променя пространството около текста. Радиусът на ъгъла променя очертанията. Големият радиус създава тази форма на „хапче“, без да прави етикета по-широк.
Дайте на състоянието при посочване собствено третиране
Превключете състоянието на редактиране на Hover. В Fill променете цвета на фона на #33099E и втория цвят на #6D20BF. Запазете ъгъла на градиента на 135°. В Shadow променете вертикалното отместване на 10 px и размиването на 28 px. Оставете останалите настройки непроменени.
Използвайте бутоните Default, Hover и Active на платното, за да инспектирате всяко състояние. Можете също да посочите или натиснете бутона за преглед. Променете платното между светло и тъмно, за да прегледате неговия ръб и сянка.
Състоянието на редактиране избира кои стилове променяте. Състоянието на платното променя само това, което преглеждате. Върнете се към Default редактиране, преди да коригирате външния вид в покой.
Свойствата при посочване, които все още съвпадат с тези по подразбиране, следват по-късните редакции по подразбиране. След като персонализирате свойство при посочване, то остава независимо. Проверете отново двете състояния след промяна на базовия стил.
Експортирайте и тествайте на вашата страница
Изберете раздела CSS и използвайте Copy CSS, или изберете Download, за да запишете cta-button.css. Изберете раздела HTML и копирайте съответстващия маркер на бутона. HTML включва същото име на клас и бутон с type="button".
Добавете CSS към вашия стилов лист или свържете изтегления файл от вашата страница. Поставете HTML там, където принадлежи бутонът. Двата експорта работят заедно: HTML бутон сам по себе си не включва своето стилизиране.
Отворете страницата и тествайте нейните състояния по подразбиране, при посочване, фокус от клавиатурата и натиснато състояние. Експортът включва очертание за focus-visible, леко активно движение и правило за намалено движение. Вашите околни стилове и инсталирани шрифтове все още могат да повлияят на резултата.
Генерираният бутон е стилизиран контролен елемент. Свържете неговото поведение при кликване във вашия проект; използвайте правилния тип бутон, когато го добавяте към формуляр.
cta-button.css
Името на изтегления файл следва името на класа.
Често задавани въпроси
Нуждая ли се от CSS рамка?
Не. Резултатът е стандартен CSS плюс обикновен HTML бутон. Поставете CSS във вашия собствен стилов лист и използвайте съответстващия клас върху бутона.
Download записва ли и HTML?
Download записва .css файл, кръстен на класа. Копирайте маркера на бутона отделно от раздела HTML.
Мога ли да дам на всеки ъгъл различен радиус?
Да. В Shape изключете Link all corners, след това задайте Top left, Top right, Bottom left и Bottom right независимо. Този пример ги държи свързани за форма на „хапче“.
Ще бъде ли дизайнът ми тук следващия път?
Студиото се опитва да запази текущата чернова в локалното хранилище на този браузър. Това не е акаунт или резервно копие между устройства. Настройките на браузъра, изчистването на данните на сайта или нулирането могат да го премахнат или заменят, затова експортирайте работата, която искате да запазите.
Качва ли се бутонът ми на сървър?
Визуализацията на стила и генерирането на CSS/HTML се извършват във вашия браузър. Редакторът не качва текста на бутона или черновата на стила ви, за да създаде експорта.
Дайте на следващия си бутон собствен стил.
Изберете отправна точка, коригирайте детайлите и вмъкнете кода във вашия проект.