В этой статье мы рассмотрим как оформить блок кнопок социальных сетей, вывести их в один ряд, задать фоновый цвет и границу. Таким образом у нас получится вот такой блок кнопок:
Конечно же цвета Вы можете использовать свои. Цветовое решение представленное выше – это всего лишь один из вариантов, и прочитав эту статью Вы легко сможете настроить блок кнопок под себя.
Итак, приступим.
В зависимости от 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
