Как да създадете в CSS бутони за социални мрежи

Маркировка и основни стила

Добавете още тук са стиловете:

Ние изготви себе си малко контейнер за връзки (размер, маржове, фона) и надпис.

Ние правим икони

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

Е, и защо трябва да го правим вертикално подравняване: средна. Този имот ще приведе текста в контейнера, така че тя ще бъде точно на центъра по вертикала. Също така ние искаме от нашите клетки някакъв фон визуално да ги видите на този етап. Снабдете се с полуфабрикат. Това е време, за да най-накрая добавете ikonochki.

Заключителният етап

Остава да се поставят във всяка от единиците подготвени им ikonochku, което да определи една или друга социалното. мрежа. За тази цел предлагам да се използва най-правилния начин - за да се свържете спрайт на изображението и с помощта на фон позициониране да се сложи всичко на мястото си.

С една дума, ние се нуждаем такова изображение. Аз го имам около 120 от 40.

СГО-стилове добавят следните правила:

Ние получи изходния блок изцяло украсена с икони.

По подразбиране, първите 40 пикселите на ширина и височина на фоновото изображение ще бъдат взети в този случай, но с надморската височина, и така всичко е в ред - на целия образ се вписват в блокове височина. Съответно, ние можем да Ви предпише само на фона на положението на икони Фейсбук и Туитър.

Писане на заден план, като: фон: URL (icon.png) -40px 0. Ние изрично се отбележи, че за да блокира социално-еб. фоново изображение трябва да се появи точно на определеното място - четиридесет пиксела ширина и височина на ляво, без пристрастия, защото това не е необходимо. Това е толкова просто, в действителност.

Какво друго можеш да направиш?

На второ място, можете да ги добавите към рамката.

Можете също така да се интересуват от