<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!--I am not a professional, so I would like to hear what you think about all my code. Would like to hear the critics and advises :)--> <!--Click on the text in button to see it's color changes ;) I know, it's simple --> <h1>Flat Social Buttons in CSS3</h1> <div class="container"> <div class="fb-icon-bg"></div> <div class="fb-bg"></div> <div class="twi-icon-bg"><i class="fab fa-facebook-f"></i> </div> <div class="twi-bg"></div> <div class="g-icon-bg"></div> <div class="g-bg"></div> </div> <h3>Inspiration from <a href="http://www.freebiesgallery.com/flat-social-buttons/">freebiesgallery</a> <br><br> Made by <a href="http://twitter.com/Paul_Trinko">@pollyglot</a> </h3>

/* Taking font for text in buttons */ @import url(http://fonts.googleapis.com/css?family=Oswald); body { background: #c8dfeb; font-size: 14px; } /* Title */ h1 { color: #e74c3c; font-family: 'Roboto Condensed', sans-serif; font-weight: normal; margin-top: 50px; position: relative; text-align: center; width: 100%; } /* Text in footer */ h3 { color: #2c3e50; font-family: 'Roboto Condensed', sans-serif; font-style: normal; font-weight: bold; margin-top: 400px; position: relative; text-align: center; width: 100%; } /* Link styles */ a, a:visited, a:hover { color: #e74c3c; text-decoration: none; } a:hover { color: #a05772; } /* Styles for buttons container */ .container { left: 50%; margin: -86px 0 0 -103px; position: absolute; top: 50%; } /* Facebook */ .fb-icon-bg { background: #354f88; height: 37px; margin: 0 0 -37px 0; width: 41px; } .fb-icon-bg:after { content: 'V'; display: block; padding: 9px 10px 5px 15px; } .fb-bg { background: #3b5998; display: block; height: 37px; margin: 0 0 30px 41px; width: 166px; } .fb-bg:after { color: #fff; content: "sign in with facebook"; font-family: 'Oswald', sans-serif; height: 37px; left: 8%; position: relative; text-transform: uppercase; top: 22%; width: 41px; } .fb-bg:hover{ cursor: pointer; } .fb-bg:active{ background: #354f88; } /* Twitter */ .twi-icon-bg:after { content: url(https://dl.dropboxusercontent.com/u/54149043/CssDeck/twi-icon.png); display: block; padding: 11px 10px 6px 11px; } .twi-icon-bg { background: #40a2d1; height: 37px; margin: 0 0 -37px 0; width: 41px; } .twi-bg { background: #45b0e3; height: 37px; margin: 0 0 30px 41px; width: 166px; } .twi-bg:after { color: #fff; content: "sign in with twitter"; font-family: 'Oswald', sans-serif; height: 37px; left: 11%; position: relative; text-transform: uppercase; top: 22%; width: 41px; } .twi-bg:hover { cursor: pointer; } .twi-bg:active { background: #40a2d1; } /* Google+ */ .g-icon-bg:after { content: url(https://dl.dropboxusercontent.com/u/54149043/CssDeck/g-icon.png); display: block; padding: 11px 10px 6px 13px; } .g-icon-bg { background: #ce3e26; height: 37px; margin: 0 0 -37px 0; width: 41px; } .g-bg { background: #de4c34; height: 37px; margin-left: 41px; width: 166px; } .g-bg:after { color: #fff; content: "sign in with google+"; font-family: 'Oswald', sans-serif; height: 37px; left: 10%; position: relative; text-transform: uppercase; top: 22%; width: 41px; } .g-bg:hover { cursor: pointer; } .g-bg:active { background: #ce3e26; }