Social login function thru google, facebook or twitter is common nowadays. Above example required using of external images.
Bootstrap & Font awesome version
I use Bootstrap framework & Font Awesome to achieve similar result, only with pure HTML & CSS, best for multilingual use-case scenario.
With the default button color scheme (primary, info, danger) provided by Bootstrap, it is good enough to support Facebook, Twitter & Google login. If you need more different color style, you will have to extend the default css.
The code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<html> <head> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap-theme.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script> <!-- font awesome css --> <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> </head> <body style="text-align:center; padding:1em"> <div class="btn-group"> <a class='btn btn-danger disabled'><i class="fa fa-google-plus" style="width:16px; height:20px"></i></a> <a class='btn btn-danger' href='' style="width:12em;"> Sign in with Google</a> </div> <br /><br /> <div class="btn-group"> <a class='btn btn-primary disabled'><i class="fa fa-facebook" style="width:16px; height:20px"></i></a> <a class='btn btn-primary ' href='' style="width:12em"> Sign in with Facebook</a> </div> <br /><br /> <div class="btn-group"> <a class='btn btn-info disabled'><i class="fa fa-twitter" style="width:16px; height:20px"></i></a> <a class='btn btn-info ' href='' style="width:12em"> Sign in with Twitter</a> </div> <br /><br /> </body> <html> |