Как да направите в бутоните СГО на сайта - красива, триизмерен
Как да създадете бутон
На първо място, бих искал да започна с това, че можете да си създадете бутон, по различен начин. Всичко зависи по-скоро от целта, за която е необходимо. Разбира се, за да изпратите формуляра, например, трябва да го създаде, както следва:
HTML5 и CSS3 практика от нула до резултата!
Но почти всички други цели и ще се поберат другата опция. Какво искаш да кажеш с всички бутони? Мнозина вярват, че елементите на менюто или елементи, като кликнете на този сайт, че се променя, разкрити или показват. Тези елементи могат да бъдат създадени по следните начини:
Със същия вход таг:
Такъв бутон няма да направи нищо и кликнете върху него, за да няма нищо олово. Имаше нужда от използване на скриптове, за да определят какво се случва, когато щракнете. Друг вариант да се създаде:
(Или педя, ако тя трябва да е с малки букви елемент). Разбира се, този вариант е по-лошо, че трябва да напиша някои допълнителни стилове за проектиране и въвеждане на вида = "бутона" вече има някои подразбиране.
Разбира се, това е малко по грешен начин да се създаде. Тя трябва да се използва само, когато е необходимо да се направи независим от другия бутон, който не е част от формата. Третият вариант:
Input споделя това мнение - чисто графичен. В този случай е достатъчно да се запиша на пътя и на избраното изображение ще може да се кликва, ще се уточни какво трябва да се случи, когато натиснете. Четвъртият вариант:
В HTML свързали бутон маркер, който помага да се създаде бутони с различно съдържание. В този случай, предимството е, че можете да поставите всяко съдържание директно между отварящия и затварящия маркер.
Бътън може да се използва както по форма, и по себе си. Ако резултатът от належаща нужда да се изпрати към сървъра, маркерът трябва да бъде във форма, контейнер за правилното функциониране.
Е, със създаването на всички, разбира се, но сега гърба на тяхната регистрация. Да предположим, че той е създаден с помощта на входа, какво следва? Ако е необходимо да промените външния вид на елемента, можете да използвате различни CSS-свойства. Например, нека да посочи такъв:
Ширината и височината на елемента е по-добре да не искаме, и размери образуват с помощта на уплътнение. Ние добавяме тези стилове:
Вторият имот ви позволява да задържите курсора на мишката върху бутона за промяна на формата на курсора на индекса, за да стане ясно, че това е един бутон, и можете да кликнете върху него.
HTML5 и CSS3 практика от нула до резултата!
Поставяне на графични бутон. Като предимство на бутона на етикет, аз посочи, че е възможно да вмъкнете картинка. Но в действителност това може да стане без проблеми и входни елементи. Така че, още по-правилно, защото изображението не се добавя към IMG таг, и чрез определяне на заден план. Като пример, аз използвам button.png изображение.
Препоръчително е да поставите бутон е PNG изображение, тъй като те може и подобряване на външния вид.
Съответно, забрана повторение на изображението на хоризонтално и вертикално, както и даде голяма тире в ляво, тъй като това е мястото, където се организира на снимката. Вместо това, тя ще има само себе си, своята позиция може да се контролира с помощта на фон-позиция.
В съответствие с това нека добавим позицията на заден план. Например, аз предлагам да се публикува на снимката отдясно вместо отляво. Също така, за това, че трябва да промените посоката, с която имаме вътрешна подплата. Това трябва да се направи правилно.
Позиция по избор определени свойства фон-позиция, където се използва кратката форма, която позволява да се определят всички параметри на фона на една линия. Позицията се определя от две стойности (първо хоризонтално, втората вертикална). Стойностите, които могат да определят ключови думи в пиксели и проценти. Нашата история показва, че картината ще бъде на правото на хоризонтален и вертикален център.
Използването на триизмерни сенки
Следваща прием се извършва с помощта на един от CSS3 имотите - кутия сянка. Тя ви позволява да добавите бутон, триизмерна, защото понякога е необходимо да се изработи. По-рано тази изисква използването на допълнителни изображения, но сега не е задължително да бъде много по-добре да се използват сянка.
Сам прием е много проста, ние просто се движат леко сянка и да го даде цвят. Добавете стил на въвеждане такъв имот:
В действителност, сенките, които можете да добавите толкова, колкото е необходимо, само за да се изброят ги разделени със запетая.
Външен вид задържане на курсора
Като цяло, повечето от бутоните, за да променят външния си вид по някакъв начин, когато кръжи или щракнете върху тях. Това е добра форма на уеб дизайн, защото е по-удобен за потребителя, който ще видим ясно, че той донесе на курсора с продукта. Как да промените външния вид на един бутон, когато се движите? Използвайте псевдо висене.
Това е начина за избор на ще излезе в този случай. Той щеше да вдигне всички на входа от типа на бутон на екрана позицията на курсора. Ако искате да изберете само един елемент, по-добре е да се прилага с помощта на стила или идентификатор клас. Съответно, можете да промените цвета на фона, текста, промяна на изображението, за да се превърне елемент и т.н. Ако искате да направите промени настъпили постепенно, а не рязко, използвайте преход имота.
Сега всичко ще се промени, ще се случи плавно в рамките на 1 секунда. Така че днес ние ще разгледаме прост CSS свойства, които могат да се използват за декорация копчета. Както можете да видите, нищо сложно. По-мощен информация можете да намерите в премиум хода на CSS3. и аз съм в това, с което казвате сбогом.
HTML5 и CSS3 практика от нула до резултата!
Най-IT новини и уеб разработки на нашия канал Телеграма
