Social Login

Developer

Size

9,310 Kb

Views

4,048

Social Login Previews
Social Login HTML Codes
Social Login CSS Codes

How do I make an social login?

Simple social login using Bootstrap-Social. What is a social login? How do you make a social login? This script and codes were developed by Edson Alcalá on 20 January 2023, Friday.

Social Login Previews

Social Login - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Social Login</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="col-md-4 col-md-offset-4"> <h3 class="text-center">Login</h3> <a class="btn btn-block btn-social btn-google"> <span class="fa fa-google"></span> Sign in with Google </a> <a class="btn btn-block btn-social btn-soundcloud"> <span class="fa fa-soundcloud"></span> Sign in with Soundcloud </a> <a class="btn btn-block btn-social btn-facebook"> <span class="fa fa-facebook"></span> Sign in with Facebook </a> <a class="btn btn-block btn-social btn-vimeo"> <span class="fa fa-vimeo"></span> Sign in with Vimeo </a> </div>
</div>
</body>
</html>

Social Login - Script Codes CSS Codes

/* * Social Buttons for Bootstrap * * Copyright 2013-2015 Panayiotis Lipiridis * Licensed under the MIT License * * https://github.com/lipis/bootstrap-social */
.btn-social { position: relative; padding-left: 44px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.btn-social > :first-child { position: absolute; left: 0; top: 0; bottom: 0; width: 32px; line-height: 34px; font-size: 1.6em; text-align: center; border-right: 1px solid rgba(0, 0, 0, 0.2);
}
.btn-social.btn-lg { padding-left: 61px;
}
.btn-social.btn-lg > :first-child { line-height: 45px; width: 45px; font-size: 1.8em;
}
.btn-social.btn-sm { padding-left: 38px;
}
.btn-social.btn-sm > :first-child { line-height: 28px; width: 28px; font-size: 1.4em;
}
.btn-social.btn-xs { padding-left: 30px;
}
.btn-social.btn-xs > :first-child { line-height: 20px; width: 20px; font-size: 1.2em;
}
.btn-social-icon { position: relative; padding-left: 44px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 34px; width: 34px; padding: 0;
}
.btn-social-icon > :first-child { position: absolute; left: 0; top: 0; bottom: 0; width: 32px; line-height: 34px; font-size: 1.6em; text-align: center; border-right: 1px solid rgba(0, 0, 0, 0.2);
}
.btn-social-icon.btn-lg { padding-left: 61px;
}
.btn-social-icon.btn-lg > :first-child { line-height: 45px; width: 45px; font-size: 1.8em;
}
.btn-social-icon.btn-sm { padding-left: 38px;
}
.btn-social-icon.btn-sm > :first-child { line-height: 28px; width: 28px; font-size: 1.4em;
}
.btn-social-icon.btn-xs { padding-left: 30px;
}
.btn-social-icon.btn-xs > :first-child { line-height: 20px; width: 20px; font-size: 1.2em;
}
.btn-social-icon > :first-child { border: none; text-align: center; width: 100% !important;
}
.btn-social-icon.btn-lg { height: 45px; width: 45px; padding-left: 0; padding-right: 0;
}
.btn-social-icon.btn-sm { height: 30px; width: 30px; padding-left: 0; padding-right: 0;
}
.btn-social-icon.btn-xs { height: 22px; width: 22px; padding-left: 0; padding-right: 0;
}
.btn-adn { color: #fff; background-color: #d87a68; border-color: rgba(0, 0, 0, 0.2);
}
.btn-adn:focus, .btn-adn.focus { color: #fff; background-color: #ce563f; border-color: rgba(0, 0, 0, 0.2);
}
.btn-adn:hover { color: #fff; background-color: #ce563f; border-color: rgba(0, 0, 0, 0.2);
}
.btn-adn:active, .btn-adn.active, .open > .dropdown-toggle.btn-adn { color: #fff; background-color: #ce563f; border-color: rgba(0, 0, 0, 0.2);
}
.btn-adn:active:hover, .btn-adn.active:hover, .open > .dropdown-toggle.btn-adn:hover, .btn-adn:active:focus, .btn-adn.active:focus, .open > .dropdown-toggle.btn-adn:focus, .btn-adn:active.focus, .btn-adn.active.focus, .open > .dropdown-toggle.btn-adn.focus { color: #fff; background-color: #b94630; border-color: rgba(0, 0, 0, 0.2);
}
.btn-adn:active, .btn-adn.active, .open > .dropdown-toggle.btn-adn { background-image: none;
}
.btn-adn.disabled, .btn-adn[disabled], fieldset[disabled] .btn-adn, .btn-adn.disabled:hover, .btn-adn[disabled]:hover, fieldset[disabled] .btn-adn:hover, .btn-adn.disabled:focus, .btn-adn[disabled]:focus, fieldset[disabled] .btn-adn:focus, .btn-adn.disabled.focus, .btn-adn[disabled].focus, fieldset[disabled] .btn-adn.focus, .btn-adn.disabled:active, .btn-adn[disabled]:active, fieldset[disabled] .btn-adn:active, .btn-adn.disabled.active, .btn-adn[disabled].active, fieldset[disabled] .btn-adn.active { background-color: #d87a68; border-color: rgba(0, 0, 0, 0.2);
}
.btn-adn .badge { color: #d87a68; background-color: #fff;
}
.btn-bitbucket { color: #fff; background-color: #205081; border-color: rgba(0, 0, 0, 0.2);
}
.btn-bitbucket:focus, .btn-bitbucket.focus { color: #fff; background-color: #163758; border-color: rgba(0, 0, 0, 0.2);
}
.btn-bitbucket:hover { color: #fff; background-color: #163758; border-color: rgba(0, 0, 0, 0.2);
}
.btn-bitbucket:active, .btn-bitbucket.active, .open > .dropdown-toggle.btn-bitbucket { color: #fff; background-color: #163758; border-color: rgba(0, 0, 0, 0.2);
}
.btn-bitbucket:active:hover, .btn-bitbucket.active:hover, .open > .dropdown-toggle.btn-bitbucket:hover, .btn-bitbucket:active:focus, .btn-bitbucket.active:focus, .open > .dropdown-toggle.btn-bitbucket:focus, .btn-bitbucket:active.focus, .btn-bitbucket.active.focus, .open > .dropdown-toggle.btn-bitbucket.focus { color: #fff; background-color: #0f253c; border-color: rgba(0, 0, 0, 0.2);
}
.btn-bitbucket:active, .btn-bitbucket.active, .open > .dropdown-toggle.btn-bitbucket { background-image: none;
}
.btn-bitbucket.disabled, .btn-bitbucket[disabled], fieldset[disabled] .btn-bitbucket, .btn-bitbucket.disabled:hover, .btn-bitbucket[disabled]:hover, fieldset[disabled] .btn-bitbucket:hover, .btn-bitbucket.disabled:focus, .btn-bitbucket[disabled]:focus, fieldset[disabled] .btn-bitbucket:focus, .btn-bitbucket.disabled.focus, .btn-bitbucket[disabled].focus, fieldset[disabled] .btn-bitbucket.focus, .btn-bitbucket.disabled:active, .btn-bitbucket[disabled]:active, fieldset[disabled] .btn-bitbucket:active, .btn-bitbucket.disabled.active, .btn-bitbucket[disabled].active, fieldset[disabled] .btn-bitbucket.active { background-color: #205081; border-color: rgba(0, 0, 0, 0.2);
}
.btn-bitbucket .badge { color: #205081; background-color: #fff;
}
.btn-dropbox { color: #fff; background-color: #1087dd; border-color: rgba(0, 0, 0, 0.2);
}
.btn-dropbox:focus, .btn-dropbox.focus { color: #fff; background-color: #0d6aad; border-color: rgba(0, 0, 0, 0.2);
}
.btn-dropbox:hover { color: #fff; background-color: #0d6aad; border-color: rgba(0, 0, 0, 0.2);
}
.btn-dropbox:active, .btn-dropbox.active, .open > .dropdown-toggle.btn-dropbox { color: #fff; background-color: #0d6aad; border-color: rgba(0, 0, 0, 0.2);
}
.btn-dropbox:active:hover, .btn-dropbox.active:hover, .open > .dropdown-toggle.btn-dropbox:hover, .btn-dropbox:active:focus, .btn-dropbox.active:focus, .open > .dropdown-toggle.btn-dropbox:focus, .btn-dropbox:active.focus, .btn-dropbox.active.focus, .open > .dropdown-toggle.btn-dropbox.focus { color: #fff; background-color: #0a568c; border-color: rgba(0, 0, 0, 0.2);
}
.btn-dropbox:active, .btn-dropbox.active, .open > .dropdown-toggle.btn-dropbox { background-image: none;
}
.btn-dropbox.disabled, .btn-dropbox[disabled], fieldset[disabled] .btn-dropbox, .btn-dropbox.disabled:hover, .btn-dropbox[disabled]:hover, fieldset[disabled] .btn-dropbox:hover, .btn-dropbox.disabled:focus, .btn-dropbox[disabled]:focus, fieldset[disabled] .btn-dropbox:focus, .btn-dropbox.disabled.focus, .btn-dropbox[disabled].focus, fieldset[disabled] .btn-dropbox.focus, .btn-dropbox.disabled:active, .btn-dropbox[disabled]:active, fieldset[disabled] .btn-dropbox:active, .btn-dropbox.disabled.active, .btn-dropbox[disabled].active, fieldset[disabled] .btn-dropbox.active { background-color: #1087dd; border-color: rgba(0, 0, 0, 0.2);
}
.btn-dropbox .badge { color: #1087dd; background-color: #fff;
}
.btn-facebook { color: #fff; background-color: #3b5998; border-color: rgba(0, 0, 0, 0.2);
}
.btn-facebook:focus, .btn-facebook.focus { color: #fff; background-color: #2d4373; border-color: rgba(0, 0, 0, 0.2);
}
.btn-facebook:hover { color: #fff; background-color: #2d4373; border-color: rgba(0, 0, 0, 0.2);
}
.btn-facebook:active, .btn-facebook.active, .open > .dropdown-toggle.btn-facebook { color: #fff; background-color: #2d4373; border-color: rgba(0, 0, 0, 0.2);
}
.btn-facebook:active:hover, .btn-facebook.active:hover, .open > .dropdown-toggle.btn-facebook:hover, .btn-facebook:active:focus, .btn-facebook.active:focus, .open > .dropdown-toggle.btn-facebook:focus, .btn-facebook:active.focus, .btn-facebook.active.focus, .open > .dropdown-toggle.btn-facebook.focus { color: #fff; background-color: #23345a; border-color: rgba(0, 0, 0, 0.2);
}
.btn-facebook:active, .btn-facebook.active, .open > .dropdown-toggle.btn-facebook { background-image: none;
}
.btn-facebook.disabled, .btn-facebook[disabled], fieldset[disabled] .btn-facebook, .btn-facebook.disabled:hover, .btn-facebook[disabled]:hover, fieldset[disabled] .btn-facebook:hover, .btn-facebook.disabled:focus, .btn-facebook[disabled]:focus, fieldset[disabled] .btn-facebook:focus, .btn-facebook.disabled.focus, .btn-facebook[disabled].focus, fieldset[disabled] .btn-facebook.focus, .btn-facebook.disabled:active, .btn-facebook[disabled]:active, fieldset[disabled] .btn-facebook:active, .btn-facebook.disabled.active, .btn-facebook[disabled].active, fieldset[disabled] .btn-facebook.active { background-color: #3b5998; border-color: rgba(0, 0, 0, 0.2);
}
.btn-facebook .badge { color: #3b5998; background-color: #fff;
}
.btn-flickr { color: #fff; background-color: #ff0084; border-color: rgba(0, 0, 0, 0.2);
}
.btn-flickr:focus, .btn-flickr.focus { color: #fff; background-color: #cc006a; border-color: rgba(0, 0, 0, 0.2);
}
.btn-flickr:hover { color: #fff; background-color: #cc006a; border-color: rgba(0, 0, 0, 0.2);
}
.btn-flickr:active, .btn-flickr.active, .open > .dropdown-toggle.btn-flickr { color: #fff; background-color: #cc006a; border-color: rgba(0, 0, 0, 0.2);
}
.btn-flickr:active:hover, .btn-flickr.active:hover, .open > .dropdown-toggle.btn-flickr:hover, .btn-flickr:active:focus, .btn-flickr.active:focus, .open > .dropdown-toggle.btn-flickr:focus, .btn-flickr:active.focus, .btn-flickr.active.focus, .open > .dropdown-toggle.btn-flickr.focus { color: #fff; background-color: #a80057; border-color: rgba(0, 0, 0, 0.2);
}
.btn-flickr:active, .btn-flickr.active, .open > .dropdown-toggle.btn-flickr { background-image: none;
}
.btn-flickr.disabled, .btn-flickr[disabled], fieldset[disabled] .btn-flickr, .btn-flickr.disabled:hover, .btn-flickr[disabled]:hover, fieldset[disabled] .btn-flickr:hover, .btn-flickr.disabled:focus, .btn-flickr[disabled]:focus, fieldset[disabled] .btn-flickr:focus, .btn-flickr.disabled.focus, .btn-flickr[disabled].focus, fieldset[disabled] .btn-flickr.focus, .btn-flickr.disabled:active, .btn-flickr[disabled]:active, fieldset[disabled] .btn-flickr:active, .btn-flickr.disabled.active, .btn-flickr[disabled].active, fieldset[disabled] .btn-flickr.active { background-color: #ff0084; border-color: rgba(0, 0, 0, 0.2);
}
.btn-flickr .badge { color: #ff0084; background-color: #fff;
}
.btn-foursquare { color: #fff; background-color: #f94877; border-color: rgba(0, 0, 0, 0.2);
}
.btn-foursquare:focus, .btn-foursquare.focus { color: #fff; background-color: #f71752; border-color: rgba(0, 0, 0, 0.2);
}
.btn-foursquare:hover { color: #fff; background-color: #f71752; border-color: rgba(0, 0, 0, 0.2);
}
.btn-foursquare:active, .btn-foursquare.active, .open > .dropdown-toggle.btn-foursquare { color: #fff; background-color: #f71752; border-color: rgba(0, 0, 0, 0.2);
}
.btn-foursquare:active:hover, .btn-foursquare.active:hover, .open > .dropdown-toggle.btn-foursquare:hover, .btn-foursquare:active:focus, .btn-foursquare.active:focus, .open > .dropdown-toggle.btn-foursquare:focus, .btn-foursquare:active.focus, .btn-foursquare.active.focus, .open > .dropdown-toggle.btn-foursquare.focus { color: #fff; background-color: #e30742; border-color: rgba(0, 0, 0, 0.2);
}
.btn-foursquare:active, .btn-foursquare.active, .open > .dropdown-toggle.btn-foursquare { background-image: none;
}
.btn-foursquare.disabled, .btn-foursquare[disabled], fieldset[disabled] .btn-foursquare, .btn-foursquare.disabled:hover, .btn-foursquare[disabled]:hover, fieldset[disabled] .btn-foursquare:hover, .btn-foursquare.disabled:focus, .btn-foursquare[disabled]:focus, fieldset[disabled] .btn-foursquare:focus, .btn-foursquare.disabled.focus, .btn-foursquare[disabled].focus, fieldset[disabled] .btn-foursquare.focus, .btn-foursquare.disabled:active, .btn-foursquare[disabled]:active, fieldset[disabled] .btn-foursquare:active, .btn-foursquare.disabled.active, .btn-foursquare[disabled].active, fieldset[disabled] .btn-foursquare.active { background-color: #f94877; border-color: rgba(0, 0, 0, 0.2);
}
.btn-foursquare .badge { color: #f94877; background-color: #fff;
}
.btn-github { color: #fff; background-color: #444; border-color: rgba(0, 0, 0, 0.2);
}
.btn-github:focus, .btn-github.focus { color: #fff; background-color: #2b2b2b; border-color: rgba(0, 0, 0, 0.2);
}
.btn-github:hover { color: #fff; background-color: #2b2b2b; border-color: rgba(0, 0, 0, 0.2);
}
.btn-github:active, .btn-github.active, .open > .dropdown-toggle.btn-github { color: #fff; background-color: #2b2b2b; border-color: rgba(0, 0, 0, 0.2);
}
.btn-github:active:hover, .btn-github.active:hover, .open > .dropdown-toggle.btn-github:hover, .btn-github:active:focus, .btn-github.active:focus, .open > .dropdown-toggle.btn-github:focus, .btn-github:active.focus, .btn-github.active.focus, .open > .dropdown-toggle.btn-github.focus { color: #fff; background-color: #191919; border-color: rgba(0, 0, 0, 0.2);
}
.btn-github:active, .btn-github.active, .open > .dropdown-toggle.btn-github { background-image: none;
}
.btn-github.disabled, .btn-github[disabled], fieldset[disabled] .btn-github, .btn-github.disabled:hover, .btn-github[disabled]:hover, fieldset[disabled] .btn-github:hover, .btn-github.disabled:focus, .btn-github[disabled]:focus, fieldset[disabled] .btn-github:focus, .btn-github.disabled.focus, .btn-github[disabled].focus, fieldset[disabled] .btn-github.focus, .btn-github.disabled:active, .btn-github[disabled]:active, fieldset[disabled] .btn-github:active, .btn-github.disabled.active, .btn-github[disabled].active, fieldset[disabled] .btn-github.active { background-color: #444; border-color: rgba(0, 0, 0, 0.2);
}
.btn-github .badge { color: #444; background-color: #fff;
}
.btn-google { color: #fff; background-color: #dd4b39; border-color: rgba(0, 0, 0, 0.2);
}
.btn-google:focus, .btn-google.focus { color: #fff; background-color: #c23321; border-color: rgba(0, 0, 0, 0.2);
}
.btn-google:hover { color: #fff; background-color: #c23321; border-color: rgba(0, 0, 0, 0.2);
}
.btn-google:active, .btn-google.active, .open > .dropdown-toggle.btn-google { color: #fff; background-color: #c23321; border-color: rgba(0, 0, 0, 0.2);
}
.btn-google:active:hover, .btn-google.active:hover, .open > .dropdown-toggle.btn-google:hover, .btn-google:active:focus, .btn-google.active:focus, .open > .dropdown-toggle.btn-google:focus, .btn-google:active.focus, .btn-google.active.focus, .open > .dropdown-toggle.btn-google.focus { color: #fff; background-color: #a32b1c; border-color: rgba(0, 0, 0, 0.2);
}
.btn-google:active, .btn-google.active, .open > .dropdown-toggle.btn-google { background-image: none;
}
.btn-google.disabled, .btn-google[disabled], fieldset[disabled] .btn-google, .btn-google.disabled:hover, .btn-google[disabled]:hover, fieldset[disabled] .btn-google:hover, .btn-google.disabled:focus, .btn-google[disabled]:focus, fieldset[disabled] .btn-google:focus, .btn-google.disabled.focus, .btn-google[disabled].focus, fieldset[disabled] .btn-google.focus, .btn-google.disabled:active, .btn-google[disabled]:active, fieldset[disabled] .btn-google:active, .btn-google.disabled.active, .btn-google[disabled].active, fieldset[disabled] .btn-google.active { background-color: #dd4b39; border-color: rgba(0, 0, 0, 0.2);
}
.btn-google .badge { color: #dd4b39; background-color: #fff;
}
.btn-instagram { color: #fff; background-color: #3f729b; border-color: rgba(0, 0, 0, 0.2);
}
.btn-instagram:focus, .btn-instagram.focus { color: #fff; background-color: #305777; border-color: rgba(0, 0, 0, 0.2);
}
.btn-instagram:hover { color: #fff; background-color: #305777; border-color: rgba(0, 0, 0, 0.2);
}
.btn-instagram:active, .btn-instagram.active, .open > .dropdown-toggle.btn-instagram { color: #fff; background-color: #305777; border-color: rgba(0, 0, 0, 0.2);
}
.btn-instagram:active:hover, .btn-instagram.active:hover, .open > .dropdown-toggle.btn-instagram:hover, .btn-instagram:active:focus, .btn-instagram.active:focus, .open > .dropdown-toggle.btn-instagram:focus, .btn-instagram:active.focus, .btn-instagram.active.focus, .open > .dropdown-toggle.btn-instagram.focus { color: #fff; background-color: #26455d; border-color: rgba(0, 0, 0, 0.2);
}
.btn-instagram:active, .btn-instagram.active, .open > .dropdown-toggle.btn-instagram { background-image: none;
}
.btn-instagram.disabled, .btn-instagram[disabled], fieldset[disabled] .btn-instagram, .btn-instagram.disabled:hover, .btn-instagram[disabled]:hover, fieldset[disabled] .btn-instagram:hover, .btn-instagram.disabled:focus, .btn-instagram[disabled]:focus, fieldset[disabled] .btn-instagram:focus, .btn-instagram.disabled.focus, .btn-instagram[disabled].focus, fieldset[disabled] .btn-instagram.focus, .btn-instagram.disabled:active, .btn-instagram[disabled]:active, fieldset[disabled] .btn-instagram:active, .btn-instagram.disabled.active, .btn-instagram[disabled].active, fieldset[disabled] .btn-instagram.active { background-color: #3f729b; border-color: rgba(0, 0, 0, 0.2);
}
.btn-instagram .badge { color: #3f729b; background-color: #fff;
}
.btn-linkedin { color: #fff; background-color: #007bb6; border-color: rgba(0, 0, 0, 0.2);
}
.btn-linkedin:focus, .btn-linkedin.focus { color: #fff; background-color: #005983; border-color: rgba(0, 0, 0, 0.2);
}
.btn-linkedin:hover { color: #fff; background-color: #005983; border-color: rgba(0, 0, 0, 0.2);
}
.btn-linkedin:active, .btn-linkedin.active, .open > .dropdown-toggle.btn-linkedin { color: #fff; background-color: #005983; border-color: rgba(0, 0, 0, 0.2);
}
.btn-linkedin:active:hover, .btn-linkedin.active:hover, .open > .dropdown-toggle.btn-linkedin:hover, .btn-linkedin:active:focus, .btn-linkedin.active:focus, .open > .dropdown-toggle.btn-linkedin:focus, .btn-linkedin:active.focus, .btn-linkedin.active.focus, .open > .dropdown-toggle.btn-linkedin.focus { color: #fff; background-color: #00405f; border-color: rgba(0, 0, 0, 0.2);
}
.btn-linkedin:active, .btn-linkedin.active, .open > .dropdown-toggle.btn-linkedin { background-image: none;
}
.btn-linkedin.disabled, .btn-linkedin[disabled], fieldset[disabled] .btn-linkedin, .btn-linkedin.disabled:hover, .btn-linkedin[disabled]:hover, fieldset[disabled] .btn-linkedin:hover, .btn-linkedin.disabled:focus, .btn-linkedin[disabled]:focus, fieldset[disabled] .btn-linkedin:focus, .btn-linkedin.disabled.focus, .btn-linkedin[disabled].focus, fieldset[disabled] .btn-linkedin.focus, .btn-linkedin.disabled:active, .btn-linkedin[disabled]:active, fieldset[disabled] .btn-linkedin:active, .btn-linkedin.disabled.active, .btn-linkedin[disabled].active, fieldset[disabled] .btn-linkedin.active { background-color: #007bb6; border-color: rgba(0, 0, 0, 0.2);
}
.btn-linkedin .badge { color: #007bb6; background-color: #fff;
}
.btn-microsoft { color: #fff; background-color: #2672ec; border-color: rgba(0, 0, 0, 0.2);
}
.btn-microsoft:focus, .btn-microsoft.focus { color: #fff; background-color: #125acd; border-color: rgba(0, 0, 0, 0.2);
}
.btn-microsoft:hover { color: #fff; background-color: #125acd; border-color: rgba(0, 0, 0, 0.2);
}
.btn-microsoft:active, .btn-microsoft.active, .open > .dropdown-toggle.btn-microsoft { color: #fff; background-color: #125acd; border-color: rgba(0, 0, 0, 0.2);
}
.btn-microsoft:active:hover, .btn-microsoft.active:hover, .open > .dropdown-toggle.btn-microsoft:hover, .btn-microsoft:active:focus, .btn-microsoft.active:focus, .open > .dropdown-toggle.btn-microsoft:focus, .btn-microsoft:active.focus, .btn-microsoft.active.focus, .open > .dropdown-toggle.btn-microsoft.focus { color: #fff; background-color: #0f4bac; border-color: rgba(0, 0, 0, 0.2);
}
.btn-microsoft:active, .btn-microsoft.active, .open > .dropdown-toggle.btn-microsoft { background-image: none;
}
.btn-microsoft.disabled, .btn-microsoft[disabled], fieldset[disabled] .btn-microsoft, .btn-microsoft.disabled:hover, .btn-microsoft[disabled]:hover, fieldset[disabled] .btn-microsoft:hover, .btn-microsoft.disabled:focus, .btn-microsoft[disabled]:focus, fieldset[disabled] .btn-microsoft:focus, .btn-microsoft.disabled.focus, .btn-microsoft[disabled].focus, fieldset[disabled] .btn-microsoft.focus, .btn-microsoft.disabled:active, .btn-microsoft[disabled]:active, fieldset[disabled] .btn-microsoft:active, .btn-microsoft.disabled.active, .btn-microsoft[disabled].active, fieldset[disabled] .btn-microsoft.active { background-color: #2672ec; border-color: rgba(0, 0, 0, 0.2);
}
.btn-microsoft .badge { color: #2672ec; background-color: #fff;
}
.btn-odnoklassniki { color: #fff; background-color: #f4731c; border-color: rgba(0, 0, 0, 0.2);
}
.btn-odnoklassniki:focus, .btn-odnoklassniki.focus { color: #fff; background-color: #d35b0a; border-color: rgba(0, 0, 0, 0.2);
}
.btn-odnoklassniki:hover { color: #fff; background-color: #d35b0a; border-color: rgba(0, 0, 0, 0.2);
}
.btn-odnoklassniki:active, .btn-odnoklassniki.active, .open > .dropdown-toggle.btn-odnoklassniki { color: #fff; background-color: #d35b0a; border-color: rgba(0, 0, 0, 0.2);
}
.btn-odnoklassniki:active:hover, .btn-odnoklassniki.active:hover, .open > .dropdown-toggle.btn-odnoklassniki:hover, .btn-odnoklassniki:active:focus, .btn-odnoklassniki.active:focus, .open > .dropdown-toggle.btn-odnoklassniki:focus, .btn-odnoklassniki:active.focus, .btn-odnoklassniki.active.focus, .open > .dropdown-toggle.btn-odnoklassniki.focus { color: #fff; background-color: #b14c09; border-color: rgba(0, 0, 0, 0.2);
}
.btn-odnoklassniki:active, .btn-odnoklassniki.active, .open > .dropdown-toggle.btn-odnoklassniki { background-image: none;
}
.btn-odnoklassniki.disabled, .btn-odnoklassniki[disabled], fieldset[disabled] .btn-odnoklassniki, .btn-odnoklassniki.disabled:hover, .btn-odnoklassniki[disabled]:hover, fieldset[disabled] .btn-odnoklassniki:hover, .btn-odnoklassniki.disabled:focus, .btn-odnoklassniki[disabled]:focus, fieldset[disabled] .btn-odnoklassniki:focus, .btn-odnoklassniki.disabled.focus, .btn-odnoklassniki[disabled].focus, fieldset[disabled] .btn-odnoklassniki.focus, .btn-odnoklassniki.disabled:active, .btn-odnoklassniki[disabled]:active, fieldset[disabled] .btn-odnoklassniki:active, .btn-odnoklassniki.disabled.active, .btn-odnoklassniki[disabled].active, fieldset[disabled] .btn-odnoklassniki.active { background-color: #f4731c; border-color: rgba(0, 0, 0, 0.2);
}
.btn-odnoklassniki .badge { color: #f4731c; background-color: #fff;
}
.btn-openid { color: #fff; background-color: #f7931e; border-color: rgba(0, 0, 0, 0.2);
}
.btn-openid:focus, .btn-openid.focus { color: #fff; background-color: #da7908; border-color: rgba(0, 0, 0, 0.2);
}
.btn-openid:hover { color: #fff; background-color: #da7908; border-color: rgba(0, 0, 0, 0.2);
}
.btn-openid:active, .btn-openid.active, .open > .dropdown-toggle.btn-openid { color: #fff; background-color: #da7908; border-color: rgba(0, 0, 0, 0.2);
}
.btn-openid:active:hover, .btn-openid.active:hover, .open > .dropdown-toggle.btn-openid:hover, .btn-openid:active:focus, .btn-openid.active:focus, .open > .dropdown-toggle.btn-openid:focus, .btn-openid:active.focus, .btn-openid.active.focus, .open > .dropdown-toggle.btn-openid.focus { color: #fff; background-color: #b86607; border-color: rgba(0, 0, 0, 0.2);
}
.btn-openid:active, .btn-openid.active, .open > .dropdown-toggle.btn-openid { background-image: none;
}
.btn-openid.disabled, .btn-openid[disabled], fieldset[disabled] .btn-openid, .btn-openid.disabled:hover, .btn-openid[disabled]:hover, fieldset[disabled] .btn-openid:hover, .btn-openid.disabled:focus, .btn-openid[disabled]:focus, fieldset[disabled] .btn-openid:focus, .btn-openid.disabled.focus, .btn-openid[disabled].focus, fieldset[disabled] .btn-openid.focus, .btn-openid.disabled:active, .btn-openid[disabled]:active, fieldset[disabled] .btn-openid:active, .btn-openid.disabled.active, .btn-openid[disabled].active, fieldset[disabled] .btn-openid.active { background-color: #f7931e; border-color: rgba(0, 0, 0, 0.2);
}
.btn-openid .badge { color: #f7931e; background-color: #fff;
}
.btn-pinterest { color: #fff; background-color: #cb2027; border-color: rgba(0, 0, 0, 0.2);
}
.btn-pinterest:focus, .btn-pinterest.focus { color: #fff; background-color: #9f191f; border-color: rgba(0, 0, 0, 0.2);
}
.btn-pinterest:hover { color: #fff; background-color: #9f191f; border-color: rgba(0, 0, 0, 0.2);
}
.btn-pinterest:active, .btn-pinterest.active, .open > .dropdown-toggle.btn-pinterest { color: #fff; background-color: #9f191f; border-color: rgba(0, 0, 0, 0.2);
}
.btn-pinterest:active:hover, .btn-pinterest.active:hover, .open > .dropdown-toggle.btn-pinterest:hover, .btn-pinterest:active:focus, .btn-pinterest.active:focus, .open > .dropdown-toggle.btn-pinterest:focus, .btn-pinterest:active.focus, .btn-pinterest.active.focus, .open > .dropdown-toggle.btn-pinterest.focus { color: #fff; background-color: #801419; border-color: rgba(0, 0, 0, 0.2);
}
.btn-pinterest:active, .btn-pinterest.active, .open > .dropdown-toggle.btn-pinterest { background-image: none;
}
.btn-pinterest.disabled, .btn-pinterest[disabled], fieldset[disabled] .btn-pinterest, .btn-pinterest.disabled:hover, .btn-pinterest[disabled]:hover, fieldset[disabled] .btn-pinterest:hover, .btn-pinterest.disabled:focus, .btn-pinterest[disabled]:focus, fieldset[disabled] .btn-pinterest:focus, .btn-pinterest.disabled.focus, .btn-pinterest[disabled].focus, fieldset[disabled] .btn-pinterest.focus, .btn-pinterest.disabled:active, .btn-pinterest[disabled]:active, fieldset[disabled] .btn-pinterest:active, .btn-pinterest.disabled.active, .btn-pinterest[disabled].active, fieldset[disabled] .btn-pinterest.active { background-color: #cb2027; border-color: rgba(0, 0, 0, 0.2);
}
.btn-pinterest .badge { color: #cb2027; background-color: #fff;
}
.btn-reddit { color: #000; background-color: #eff7ff; border-color: rgba(0, 0, 0, 0.2);
}
.btn-reddit:focus, .btn-reddit.focus { color: #000; background-color: #bcddff; border-color: rgba(0, 0, 0, 0.2);
}
.btn-reddit:hover { color: #000; background-color: #bcddff; border-color: rgba(0, 0, 0, 0.2);
}
.btn-reddit:active, .btn-reddit.active, .open > .dropdown-toggle.btn-reddit { color: #000; background-color: #bcddff; border-color: rgba(0, 0, 0, 0.2);
}
.btn-reddit:active:hover, .btn-reddit.active:hover, .open > .dropdown-toggle.btn-reddit:hover, .btn-reddit:active:focus, .btn-reddit.active:focus, .open > .dropdown-toggle.btn-reddit:focus, .btn-reddit:active.focus, .btn-reddit.active.focus, .open > .dropdown-toggle.btn-reddit.focus { color: #000; background-color: #98ccff; border-color: rgba(0, 0, 0, 0.2);
}
.btn-reddit:active, .btn-reddit.active, .open > .dropdown-toggle.btn-reddit { background-image: none;
}
.btn-reddit.disabled, .btn-reddit[disabled], fieldset[disabled] .btn-reddit, .btn-reddit.disabled:hover, .btn-reddit[disabled]:hover, fieldset[disabled] .btn-reddit:hover, .btn-reddit.disabled:focus, .btn-reddit[disabled]:focus, fieldset[disabled] .btn-reddit:focus, .btn-reddit.disabled.focus, .btn-reddit[disabled].focus, fieldset[disabled] .btn-reddit.focus, .btn-reddit.disabled:active, .btn-reddit[disabled]:active, fieldset[disabled] .btn-reddit:active, .btn-reddit.disabled.active, .btn-reddit[disabled].active, fieldset[disabled] .btn-reddit.active { background-color: #eff7ff; border-color: rgba(0, 0, 0, 0.2);
}
.btn-reddit .badge { color: #eff7ff; background-color: #000;
}
.btn-soundcloud { color: #fff; background-color: #f50; border-color: rgba(0, 0, 0, 0.2);
}
.btn-soundcloud:focus, .btn-soundcloud.focus { color: #fff; background-color: #c40; border-color: rgba(0, 0, 0, 0.2);
}
.btn-soundcloud:hover { color: #fff; background-color: #c40; border-color: rgba(0, 0, 0, 0.2);
}
.btn-soundcloud:active, .btn-soundcloud.active, .open > .dropdown-toggle.btn-soundcloud { color: #fff; background-color: #c40; border-color: rgba(0, 0, 0, 0.2);
}
.btn-soundcloud:active:hover, .btn-soundcloud.active:hover, .open > .dropdown-toggle.btn-soundcloud:hover, .btn-soundcloud:active:focus, .btn-soundcloud.active:focus, .open > .dropdown-toggle.btn-soundcloud:focus, .btn-soundcloud:active.focus, .btn-soundcloud.active.focus, .open > .dropdown-toggle.btn-soundcloud.focus { color: #fff; background-color: #a83800; border-color: rgba(0, 0, 0, 0.2);
}
.btn-soundcloud:active, .btn-soundcloud.active, .open > .dropdown-toggle.btn-soundcloud { background-image: none;
}
.btn-soundcloud.disabled, .btn-soundcloud[disabled], fieldset[disabled] .btn-soundcloud, .btn-soundcloud.disabled:hover, .btn-soundcloud[disabled]:hover, fieldset[disabled] .btn-soundcloud:hover, .btn-soundcloud.disabled:focus, .btn-soundcloud[disabled]:focus, fieldset[disabled] .btn-soundcloud:focus, .btn-soundcloud.disabled.focus, .btn-soundcloud[disabled].focus, fieldset[disabled] .btn-soundcloud.focus, .btn-soundcloud.disabled:active, .btn-soundcloud[disabled]:active, fieldset[disabled] .btn-soundcloud:active, .btn-soundcloud.disabled.active, .btn-soundcloud[disabled].active, fieldset[disabled] .btn-soundcloud.active { background-color: #f50; border-color: rgba(0, 0, 0, 0.2);
}
.btn-soundcloud .badge { color: #f50; background-color: #fff;
}
.btn-tumblr { color: #fff; background-color: #2c4762; border-color: rgba(0, 0, 0, 0.2);
}
.btn-tumblr:focus, .btn-tumblr.focus { color: #fff; background-color: #1c2d3f; border-color: rgba(0, 0, 0, 0.2);
}
.btn-tumblr:hover { color: #fff; background-color: #1c2d3f; border-color: rgba(0, 0, 0, 0.2);
}
.btn-tumblr:active, .btn-tumblr.active, .open > .dropdown-toggle.btn-tumblr { color: #fff; background-color: #1c2d3f; border-color: rgba(0, 0, 0, 0.2);
}
.btn-tumblr:active:hover, .btn-tumblr.active:hover, .open > .dropdown-toggle.btn-tumblr:hover, .btn-tumblr:active:focus, .btn-tumblr.active:focus, .open > .dropdown-toggle.btn-tumblr:focus, .btn-tumblr:active.focus, .btn-tumblr.active.focus, .open > .dropdown-toggle.btn-tumblr.focus { color: #fff; background-color: #111c26; border-color: rgba(0, 0, 0, 0.2);
}
.btn-tumblr:active, .btn-tumblr.active, .open > .dropdown-toggle.btn-tumblr { background-image: none;
}
.btn-tumblr.disabled, .btn-tumblr[disabled], fieldset[disabled] .btn-tumblr, .btn-tumblr.disabled:hover, .btn-tumblr[disabled]:hover, fieldset[disabled] .btn-tumblr:hover, .btn-tumblr.disabled:focus, .btn-tumblr[disabled]:focus, fieldset[disabled] .btn-tumblr:focus, .btn-tumblr.disabled.focus, .btn-tumblr[disabled].focus, fieldset[disabled] .btn-tumblr.focus, .btn-tumblr.disabled:active, .btn-tumblr[disabled]:active, fieldset[disabled] .btn-tumblr:active, .btn-tumblr.disabled.active, .btn-tumblr[disabled].active, fieldset[disabled] .btn-tumblr.active { background-color: #2c4762; border-color: rgba(0, 0, 0, 0.2);
}
.btn-tumblr .badge { color: #2c4762; background-color: #fff;
}
.btn-twitter { color: #fff; background-color: #55acee; border-color: rgba(0, 0, 0, 0.2);
}
.btn-twitter:focus, .btn-twitter.focus { color: #fff; background-color: #2795e9; border-color: rgba(0, 0, 0, 0.2);
}
.btn-twitter:hover { color: #fff; background-color: #2795e9; border-color: rgba(0, 0, 0, 0.2);
}
.btn-twitter:active, .btn-twitter.active, .open > .dropdown-toggle.btn-twitter { color: #fff; background-color: #2795e9; border-color: rgba(0, 0, 0, 0.2);
}
.btn-twitter:active:hover, .btn-twitter.active:hover, .open > .dropdown-toggle.btn-twitter:hover, .btn-twitter:active:focus, .btn-twitter.active:focus, .open > .dropdown-toggle.btn-twitter:focus, .btn-twitter:active.focus, .btn-twitter.active.focus, .open > .dropdown-toggle.btn-twitter.focus { color: #fff; background-color: #1583d7; border-color: rgba(0, 0, 0, 0.2);
}
.btn-twitter:active, .btn-twitter.active, .open > .dropdown-toggle.btn-twitter { background-image: none;
}
.btn-twitter.disabled, .btn-twitter[disabled], fieldset[disabled] .btn-twitter, .btn-twitter.disabled:hover, .btn-twitter[disabled]:hover, fieldset[disabled] .btn-twitter:hover, .btn-twitter.disabled:focus, .btn-twitter[disabled]:focus, fieldset[disabled] .btn-twitter:focus, .btn-twitter.disabled.focus, .btn-twitter[disabled].focus, fieldset[disabled] .btn-twitter.focus, .btn-twitter.disabled:active, .btn-twitter[disabled]:active, fieldset[disabled] .btn-twitter:active, .btn-twitter.disabled.active, .btn-twitter[disabled].active, fieldset[disabled] .btn-twitter.active { background-color: #55acee; border-color: rgba(0, 0, 0, 0.2);
}
.btn-twitter .badge { color: #55acee; background-color: #fff;
}
.btn-vimeo { color: #fff; background-color: #1ab7ea; border-color: rgba(0, 0, 0, 0.2);
}
.btn-vimeo:focus, .btn-vimeo.focus { color: #fff; background-color: #1295bf; border-color: rgba(0, 0, 0, 0.2);
}
.btn-vimeo:hover { color: #fff; background-color: #1295bf; border-color: rgba(0, 0, 0, 0.2);
}
.btn-vimeo:active, .btn-vimeo.active, .open > .dropdown-toggle.btn-vimeo { color: #fff; background-color: #1295bf; border-color: rgba(0, 0, 0, 0.2);
}
.btn-vimeo:active:hover, .btn-vimeo.active:hover, .open > .dropdown-toggle.btn-vimeo:hover, .btn-vimeo:active:focus, .btn-vimeo.active:focus, .open > .dropdown-toggle.btn-vimeo:focus, .btn-vimeo:active.focus, .btn-vimeo.active.focus, .open > .dropdown-toggle.btn-vimeo.focus { color: #fff; background-color: #0f7b9f; border-color: rgba(0, 0, 0, 0.2);
}
.btn-vimeo:active, .btn-vimeo.active, .open > .dropdown-toggle.btn-vimeo { background-image: none;
}
.btn-vimeo.disabled, .btn-vimeo[disabled], fieldset[disabled] .btn-vimeo, .btn-vimeo.disabled:hover, .btn-vimeo[disabled]:hover, fieldset[disabled] .btn-vimeo:hover, .btn-vimeo.disabled:focus, .btn-vimeo[disabled]:focus, fieldset[disabled] .btn-vimeo:focus, .btn-vimeo.disabled.focus, .btn-vimeo[disabled].focus, fieldset[disabled] .btn-vimeo.focus, .btn-vimeo.disabled:active, .btn-vimeo[disabled]:active, fieldset[disabled] .btn-vimeo:active, .btn-vimeo.disabled.active, .btn-vimeo[disabled].active, fieldset[disabled] .btn-vimeo.active { background-color: #1ab7ea; border-color: rgba(0, 0, 0, 0.2);
}
.btn-vimeo .badge { color: #1ab7ea; background-color: #fff;
}
.btn-vk { color: #fff; background-color: #587ea3; border-color: rgba(0, 0, 0, 0.2);
}
.btn-vk:focus, .btn-vk.focus { color: #fff; background-color: #466482; border-color: rgba(0, 0, 0, 0.2);
}
.btn-vk:hover { color: #fff; background-color: #466482; border-color: rgba(0, 0, 0, 0.2);
}
.btn-vk:active, .btn-vk.active, .open > .dropdown-toggle.btn-vk { color: #fff; background-color: #466482; border-color: rgba(0, 0, 0, 0.2);
}
.btn-vk:active:hover, .btn-vk.active:hover, .open > .dropdown-toggle.btn-vk:hover, .btn-vk:active:focus, .btn-vk.active:focus, .open > .dropdown-toggle.btn-vk:focus, .btn-vk:active.focus, .btn-vk.active.focus, .open > .dropdown-toggle.btn-vk.focus { color: #fff; background-color: #3a526b; border-color: rgba(0, 0, 0, 0.2);
}
.btn-vk:active, .btn-vk.active, .open > .dropdown-toggle.btn-vk { background-image: none;
}
.btn-vk.disabled, .btn-vk[disabled], fieldset[disabled] .btn-vk, .btn-vk.disabled:hover, .btn-vk[disabled]:hover, fieldset[disabled] .btn-vk:hover, .btn-vk.disabled:focus, .btn-vk[disabled]:focus, fieldset[disabled] .btn-vk:focus, .btn-vk.disabled.focus, .btn-vk[disabled].focus, fieldset[disabled] .btn-vk.focus, .btn-vk.disabled:active, .btn-vk[disabled]:active, fieldset[disabled] .btn-vk:active, .btn-vk.disabled.active, .btn-vk[disabled].active, fieldset[disabled] .btn-vk.active { background-color: #587ea3; border-color: rgba(0, 0, 0, 0.2);
}
.btn-vk .badge { color: #587ea3; background-color: #fff;
}
.btn-yahoo { color: #fff; background-color: #720e9e; border-color: rgba(0, 0, 0, 0.2);
}
.btn-yahoo:focus, .btn-yahoo.focus { color: #fff; background-color: #500a6f; border-color: rgba(0, 0, 0, 0.2);
}
.btn-yahoo:hover { color: #fff; background-color: #500a6f; border-color: rgba(0, 0, 0, 0.2);
}
.btn-yahoo:active, .btn-yahoo.active, .open > .dropdown-toggle.btn-yahoo { color: #fff; background-color: #500a6f; border-color: rgba(0, 0, 0, 0.2);
}
.btn-yahoo:active:hover, .btn-yahoo.active:hover, .open > .dropdown-toggle.btn-yahoo:hover, .btn-yahoo:active:focus, .btn-yahoo.active:focus, .open > .dropdown-toggle.btn-yahoo:focus, .btn-yahoo:active.focus, .btn-yahoo.active.focus, .open > .dropdown-toggle.btn-yahoo.focus { color: #fff; background-color: #39074e; border-color: rgba(0, 0, 0, 0.2);
}
.btn-yahoo:active, .btn-yahoo.active, .open > .dropdown-toggle.btn-yahoo { background-image: none;
}
.btn-yahoo.disabled, .btn-yahoo[disabled], fieldset[disabled] .btn-yahoo, .btn-yahoo.disabled:hover, .btn-yahoo[disabled]:hover, fieldset[disabled] .btn-yahoo:hover, .btn-yahoo.disabled:focus, .btn-yahoo[disabled]:focus, fieldset[disabled] .btn-yahoo:focus, .btn-yahoo.disabled.focus, .btn-yahoo[disabled].focus, fieldset[disabled] .btn-yahoo.focus, .btn-yahoo.disabled:active, .btn-yahoo[disabled]:active, fieldset[disabled] .btn-yahoo:active, .btn-yahoo.disabled.active, .btn-yahoo[disabled].active, fieldset[disabled] .btn-yahoo.active { background-color: #720e9e; border-color: rgba(0, 0, 0, 0.2);
}
.btn-yahoo .badge { color: #720e9e; background-color: #fff;
}

Home Page	Home
Developer	Edson Alcalá
Username	EdsonAlcala
Uploaded	January 20, 2023
Rating	3
Size	9,310 Kb
Views	4,048

Do you need developer help for Social Login?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Edson Alcalá (EdsonAlcala) Script Codes

Name	Size
TuMenu page	3,450 Kb
FacturadorGratis.com	2,012 Kb
Learning Canvas - Rectangles	1,496 Kb
TuMenu intro	11,631 Kb
Learning canvas - Hello world	1,496 Kb
Learning canvas - Meme	1,519 Kb
Udacity course project 1	1,477 Kb
Youtube to Mp3 Pro	2,806 Kb
Alternative Bootstrap Thumbnails With Hover Effect	2,897 Kb
Learning SASS - 1	2,233 Kb

Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!

Similar Scripts & Codes

Name	Username	Size
SVG Animation	Pollardld	3,133 Kb
Pure CSS Animated Photo Stack	Depthdev	2,486 Kb
Obligatory CSS3 UI Nav	Romandiaz	9,017 Kb
Simple Login Form	JoshBlackwood	4,418 Kb
Fireworks Show	Arianalynn	3,048 Kb
Vertical Pan Hammer.js example	Jtangelder	2,144 Kb
A Pen by Kenny Mark	Kennymark	5,574 Kb
Replace url via jquery	Serluk	1,429 Kb
Whyutils	LeYvan	3,752 Kb
Firefox Breakout Guide	Quincysoeliman	2,576 Kb

Do you want hide your ip address?

Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!