Social Buttons库是一组用纯CSS制作的CSS按钮,基于Bootstrap和Font Awesome.
要加载bootstrap-social.css库,请从 github
<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>
它将产生以下输出 :
使用Twitter登录 使用Twitter登录 使用Twitter登录 使用Twitter登录
以下示例显示如何选择仅图标按钮.
<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>