Как расположить и оформить кнопки социальных сетей в один ряд

Как расположить и оформить кнопки социальных сетей в один ряд

В этой статье мы рассмотрим как оформить блок кнопок социальных сетей, вывести их в один ряд, задать фоновый цвет и границу. Таким образом у нас получится вот такой блок кнопок:

Как расположить и оформить кнопки социальных сетей в один ряд

Конечно же цвета Вы можете использовать свои. Цветовое решение представленное выше – это всего лишь один из вариантов, и прочитав эту статью Вы легко сможете настроить блок кнопок под себя.

Итак, приступим.

В зависимости от CMS например для DLE в файле необходимого шаблона, а для WordPress в файле single.php прописываем вывод кнопок:



Код кнопки твиттера


Код кнопки вконтакте

Код кнопки гугл +

вместо Код кнопки… вставляем коды кнопок нужных сервисов.

В файле стилей, например, style.css:

.knopki-aga {
width:500px; height:25px; margin:15px auto 5px; border:1px dashed #E1E1E1; border-radius:6px; padding:10px 16px 6px 35px; background:#F1F1F1;
}
.twit {
float:left; width:120px;
}
.facebook {
float:left; width:140px;
}
.vk {
float:left; width:160px;
}
.google {
float:left; width:80px;
}

Теперь давайте посмотрим что получилось:

border:1px dashed #E1E1E1; – мы обвели блок кнопок пунктирной линией (dashed) с шириной 1 пиксель (1px) серого цвета (#E1E1E1) – все эти три параметра можно поменять. Например границу можно сделать сплошной, пунктирной, двойной и так далее. Вот полезная картинка, пользуйтесь:

Как расположить и оформить кнопки социальных сетей в один ряд

border-radius:6px; – мы задали скругление всех четырех углов с радиусом в 6 пикселей.
padding:10px 16px 6px 35px; – немного изменили отступы.
background:#F1F1F1; – задали фоновый цвет.

На выходе получили следующее:

Как расположить и оформить кнопки социальных сетей в один ряд

источник: history-of-blog.ru

Оцените статью
Мой SEO Гид - всё для SEO, SEM, SMO и SMM
Добавить комментарий