Оформление, кръгли бутони CSS3

Вие сте тук: Начало - CSS - CSS3 - оформление, кръгли бутони CSS3.

Здравейте скъпи читатели. Ние вече сме научили много от имотите, които се появяват в CSS3. но само за да ги знаем малко. Необходимо е да се практикува! А сега ще ви покажа как да създадете кръг бутон на CSS3.

Отворете файла index.html и да се създаде проста структура

Нищо особено. Само на 3 пресечки от класа .button Нека сега се обърнем към стила.

кутия сянка: 0 3px 20px RGBA (0,0,0, 0.25),
2px вмъкнати 0 0 RGBA (255,255,255, 0.6),
0 0 2px RGBA (0,0,0, 0,1),
вмъкнати 0 0 20px RGBA (0,0,0, 0,1);
>

Фон за документа и нашите ключове взех subtlepatterns.com сайт.

Ние правим нашата Разделение линия блок, така че те наредени хоризонтално, с молба да височината, ширината, офсет от краищата на браузъра, закръгляването 50%. за да получите кръг, и когато задържите показалеца на мишката вършат. Няма нищо сложно, но сянката ми съзнателно отделени в стилове като това е частта, която може да се окаже трудно, все пак, има и много ясна, а вие ще го видите още сега.

Задава първия сянката, ние вече виждам очертанията на нашата гама:

кутия сянка: 0 3px 20px RGBA (0,0,0, 0.25);

След това поиска от вътрешната сянка. че сме имали такава okontovochka отгоре и бутона е станало по-голямата част.

кутия сянка: 0 3px 20px RGBA (0,0,0, 0.25),
2px вмъкнати 0 0 RGBA (255,255,255, 0.6);

Следваща е необходима външната сянка, за да потъмнее малко място под бутона по-долу и след вътрешните закрива пространството вътре бутона за действие)

кутия сянка: 0 3px 20px RGBA (0,0,0, 0.25),
2px вмъкнати 0 0 RGBA (255,255,255, 0.6),
0 0 2px RGBA (0,0,0, 0,1),
вмъкнати 0 0 20px RGBA (0,0,0, 0,1);

Както можете да видите, в началото изглежда трудно, много имоти, но ако се вгледате, всичко е много по-лесно. Така че, тук е нашият краен резултат:

Сега ние прилагаме поведение като посочите блок

бутон: навъртам бокс-сянка: добавям 0 0 20px RGBA (0,0,0, 0,2),
0 0 2px RGBA (255,255,255, 0.4),
2px вмъкнати 0 0 RGBA (0,0,0, 0,1);
>

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

И накрая, нека добавим нашите икони бутони, че не е било много скучно. За да направите това, ние се промени малко HTML

Ние просто добавя допълнителен клас за всеки бутон, а сега нека да ги попитате за стилове

Ето, ние просто да добавите втори фон за всеки бутон, като иконите defaulticon.com сайт.

Това е всичко. Днес разгледахме как да създадете кръг бутон на CSS3.