Библиотека Social Buttons представляет собой набор кнопок CSS, выполненных на чистом CSS и основанных на Bootstrap и Font Awesome.
Загрузка социальных кнопок
Чтобы загрузить библиотеку bootstrap-social.css, загрузите bootstrap-social.css с github и вставьте следующую строку в раздел <head> веб-страницы.
<head> <link rel = "stylesheet" href = "bootstrap-social.css"> </head>
Использование кнопки
Создайте кнопку с помощью тега привязки html и добавьте стили btn, btn-block с социальным спецификатором btn-social.
<html> <head> <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css"> <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <link rel = "stylesheet" href = "/css_buttons/bootstrap-social.css"> </head> <body> <a class = "btn btn-block btn-social btn-twitter"> <span class = "fa fa-twitter"></span> Login with Twitter </a> </body> </html>
Это даст следующий результат —
Определение размера
Вы можете увеличить или уменьшить размер кнопки, определив ее размер с помощью CSS и используя ее вместе с именем класса, как показано ниже. В приведенном примере у нас есть изменения четырех размеров.
<html>
<head>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel = "stylesheet" href = "/css_buttons/bootstrap-social.css">
</head>
<body>
<a class = "btn btn-block btn-lg btn-social btn-twitter">
<span class = "fa fa-twitter"></span>
Login with Twitter
</a>
<a class = "btn btn-block btn-md btn-social btn-twitter">
<span class = "fa fa-twitter"></span>
Login with Twitter
</a>
<a class = "btn btn-block btn-sm btn-social btn-twitter">
<span class = "fa fa-twitter"></span>
Login with Twitter
</a>
<a class = "btn btn-block btn-xs btn-social btn-twitter">
<span class = "fa fa-twitter"></span>
Login with Twitter
</a>
</body>
</html>
Это даст следующий результат —
Использование только значков
В следующем примере показано, как выбрать кнопки только для значков.
<html>
<head>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel = "stylesheet" href = "bootstrap-social.css">
</head>
<body>
<a class = "btn btn-social-icon btn-twitter">
<span class = "fa fa-twitter"></span>
</a>
</body>
</html>
Это даст следующий результат —