Social Button Transition
How do I make an social button transition?
The CSS is ugly. Adapted from Grayscale theme for Bootstrap. . What is a social button transition? How do you make a social button transition? This script and codes were developed by Calvin on 11 August 2022, Thursday.
Social Button Transition Previews
Social Button Transition - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Social Button Transition</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<body> <section id="contact" class="container content-section text-center"> <div class="row"> <div class="col-lg-8 col-lg-offset-2"> <h3>Where can You can Find me</h3> <ul class="list-inline banner-social-buttons"> <li><a href="https://twitter.com/name" class="btn btn-default btn-lg"> <span class="network-name">Twitter</span></a> </li> <li><a href="http://instagram.com/name" class="btn btn-default btn-lg"><span class="network-name">instagram</span></a> </li> <li><a href="mailto:[email protected]" class="btn btn-default btn-lg"><span class="network-name">email</span></a> </li> </ul> </div> </div> </section> <section id="contact" class="container content-section text-center"> <div class="row"> <div class="col-lg-8 col-lg-offset-2"> <h3>Where can You can Find me [FONTAWESOME]</h3> <ul class="list-inline banner-social-buttons"> <li><a href="https://twitter.com/name" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i> <span class="network-name">x</span></a> </li> <li><a href="http://instagram.com/name" class="btn btn-default btn-lg"><i class="fa fa-instagram fa-fw"></i> <span class="network-name">x</span></a> </li> <li><a href="mailto:[email protected]" class="btn btn-default btn-lg"><i class="fa fa-envelope fa-fw"></i> <span class="network-name">email</span></a> </li> </ul> </div> </div> </section> <!-- Core JavaScript Files --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
</body>
</body>
</html>
Social Button Transition - Script Codes CSS Codes
body { width: 100%; height: 100%; font-family: 'Oswald', sans-serif; Helvetica,Arial,sans-serif; color: #000; background: #000;
}
html {background: #000; margin:0 0 auto;
}
h1,
h2,
h3,
h4,
h5,
h6 { margin: 0 0 35px; text-transform: uppercase; font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: 400; letter-spacing: 1px;
}
p { margin: 0 0 25px; font-size: 18px; line-height: 1.5;
}
@media(min-width:767px) { p { margin: 0 0 35px; font-size: 20px; line-height: 1.6; }
}
a { color: #52514f; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; transition: all .2s ease-in-out;
}
a:hover,
a:focus { text-decoration: none; color: #757574;
}
.light { font-weight: 400;
}
.btn-circle { width: 60px; height: 60px; margin-top: 15px; padding: 11px 17px; border: 2px solid #fff; border-radius: 35px; font-size: 25px; color: #fff; background: 0 0; -webkit-transition: background .3s ease-in-out; -moz-transition: background .3s ease-in-out; transition: background .3s ease-in-out;
}
.btn-circle:hover,
.btn-circle:focus { outline: 0; color: #fff; background: rgba(255,255,255,.1);
}
.page-scroll .btn-circle i.animated { -webkit-transition-property: -webkit-transform; -webkit-transition-duration: 1s; -moz-transition-property: -moz-transform; -moz-transition-duration: 1s;
}
.btn1 { text-transform: uppercase; font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: 400; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; transition: all .3s ease-in-out;
}
/* General button style (reset) */
.btn1 { text-transform: uppercase; font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif; border:0; font-weight:300; width:100px; height:50px; font-family: inherit; font-size: inherit; color: inherit; background: none; cursor: pointer; padding:25px 80px; display: inline-block; text-align:center; margin:0% 10% 10% 0%; letter-spacing: 1px; outline: none; position: relative; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; transition: all .3s ease-in-out;
}
.btn1:after { content: ''; position: absolute; z-index: -1; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; transition: all .3s ease-in-out;
}
.btn { text-transform: uppercase; font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: 400; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; transition: all .3s ease-in-out;
}
.btn-default { border: 1px solid #F7AB17; color: #F7AB17; background-color: transparent;
}
.btn-default:hover,
.btn-default:focus { border: 1px solid #176e61; outline: 0; border-radius:0; opacity:1;
}
.banner-social-buttons { border-top:5px solid #222; border-bottom:5px solid #222; padding:30px 0; background:#111; margin-top:5px; text-align:center; clear:both; line-height: 1;
}
::-moz-selection { text-shadow: none; background: #fcfcfc; background: rgba(255,255,255,.2);
}
::selection { text-shadow: none; background: #fcfcfc; background: rgba(255,255,255,.2);
}
/*! * Bootstrap v3.1.1 (http://getbootstrap.com) * Copyright 2011-2014 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */ pre, tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } p, h2, h3 { margin-top:5px; padding-top:10px; padding-bottom:10px; color:#F7AB17; background-color:#000; orphans: 3; widows: 3; } .table-bordered th, .table-bordered td { border: 1px solid #ddd !important; }
}
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
*:before,
*:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
a,
a:hover,
a:focus { text-decoration: none;
}
hr { margin-top: 20px; margin-bottom: 20px; border: 0; border-top: 1px solid #eee;
}
h3,
.h3 { margin-top: 20px; margin-bottom: 10px;
}
h3,
.h3 { font-size: 24px;
}
.text-left { text-align: left;
}
.text-right { text-align: right;
}
.text-center { text-align: center;
}
.list-inline { padding-left: 0; margin-left: -5px; list-style: none;
}
.list-inline > li { display: inline-block; padding-right: 5px; padding-left: 5px;
}
dl { margin-top: 0; margin-bottom: 20px;
}
dt,
dd { line-height: 1.42857143;
}
dt { font-weight: bold;
}
dd { margin-left: 0;
}
@media (min-width: 768px) { .dl-horizontal dt { float: left; width: 160px; overflow: hidden; clear: left; text-align: right; text-overflow: ellipsis; white-space: nowrap; } .dl-horizontal dd { margin-left: 180px; }
}
.col-xs-pull-0 { right: 0;
}
.col-xs-push-0 { left: 0;
}
.col-xs-offset-0 { margin-left: 0;
} .col-sm-offset-0 { margin-left: 0; }
} .col-md-offset-0 { margin-left: 0; }
} .col-lg-offset-0 { margin-left: 0; }
}
.btn { display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: normal; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px;
}
.btn:focus,
.btn:active:focus,
.btn.active:focus { outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px;
}
.btn:hover,
.btn:focus { color: #fff; text-decoration: none;
}
.btn:active,
.btn.active { background-image: none; outline: 0; -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn { pointer-events: none; cursor: not-allowed; filter: alpha(opacity=65); -webkit-box-shadow: none; box-shadow: none; opacity: .65;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary { color: #fff; background-color: #3276b1; border-color: #285e8e;
}
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary { background-image: none;
}
.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active { background-color: #428bca; border-color: #357ebd;
}
.btn-primary .badge { color: #428bca; background-color: #fff;
}
.btn-success { color: #fff; background-color: #5cb85c; border-color: #4cae4c;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.open .dropdown-toggle.btn-success { color: #fff; background-color: #47a447; border-color: #398439;
}
.btn-success:active,
.btn-success.active,
.open .dropdown-toggle.btn-success { background-image: none;
}
.btn-success.disabled,
.btn-success[disabled],
fieldset[disabled] .btn-success,
.btn-success.disabled:hover,
.btn-success[disabled]:hover,
fieldset[disabled] .btn-success:hover,
.btn-success.disabled:focus,
.btn-success[disabled]:focus,
fieldset[disabled] .btn-success:focus,
.btn-success.disabled:active,
.btn-success[disabled]:active,
fieldset[disabled] .btn-success:active,
.btn-success.disabled.active,
.btn-success[disabled].active,
fieldset[disabled] .btn-success.active { background-color: #5cb85c; border-color: #4cae4c;
}
.btn-success .badge { color: #5cb85c; background-color: #fff;
}
.btn-info { color: #fff; background-color: #5bc0de; border-color: #46b8da;
}
.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active,
.open .dropdown-toggle.btn-info { color: #fff; background-color: #39b3d7; border-color: #269abc;
}
.btn-info:active,
.btn-info.active,
.open .dropdown-toggle.btn-info { background-image: none;
}
.btn-info.disabled,
.btn-info[disabled],
fieldset[disabled] .btn-info,
.btn-info.disabled:hover,
.btn-info[disabled]:hover,
fieldset[disabled] .btn-info:hover,
.btn-info.disabled:focus,
.btn-info[disabled]:focus,
fieldset[disabled] .btn-info:focus,
.btn-info.disabled:active,
.btn-info[disabled]:active,
fieldset[disabled] .btn-info:active,
.btn-info.disabled.active,
.btn-info[disabled].active,
fieldset[disabled] .btn-info.active { background-color: #5bc0de; border-color: #46b8da;
}
.btn-info .badge { color: #5bc0de; background-color: #fff;
}
.btn-warning { color: #fff; background-color: #f0ad4e; border-color: #eea236;
}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active,
.open .dropdown-toggle.btn-warning { color: #fff; background-color: #ed9c28; border-color: #d58512;
}
.btn-warning:active,
.btn-warning.active,
.open .dropdown-toggle.btn-warning { background-image: none;
}
.btn-warning.disabled,
.btn-warning[disabled],
fieldset[disabled] .btn-warning,
.btn-warning.disabled:hover,
.btn-warning[disabled]:hover,
fieldset[disabled] .btn-warning:hover,
.btn-warning.disabled:focus,
.btn-warning[disabled]:focus,
fieldset[disabled] .btn-warning:focus,
.btn-warning.disabled:active,
.btn-warning[disabled]:active,
fieldset[disabled] .btn-warning:active,
.btn-warning.disabled.active,
.btn-warning[disabled].active,
fieldset[disabled] .btn-warning.active { background-color: #f0ad4e; border-color: #eea236;
}
.btn-warning .badge { color: #f0ad4e; background-color: #fff;
}
.btn-danger { color: #fff; background-color: #d9534f; border-color: #d43f3a;
}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active,
.open .dropdown-toggle.btn-danger { color: #fff; background-color: #d2322d; border-color: #ac2925;
}
.btn-danger:active,
.btn-danger.active,
.open .dropdown-toggle.btn-danger { background-image: none;
}
.btn-danger.disabled,
.btn-danger[disabled],
fieldset[disabled] .btn-danger,
.btn-danger.disabled:hover,
.btn-danger[disabled]:hover,
fieldset[disabled] .btn-danger:hover,
.btn-danger.disabled:focus,
.btn-danger[disabled]:focus,
fieldset[disabled] .btn-danger:focus,
.btn-danger.disabled:active,
.btn-danger[disabled]:active,
fieldset[disabled] .btn-danger:active,
.btn-danger.disabled.active,
.btn-danger[disabled].active,
fieldset[disabled] .btn-danger.active { background-color: #d9534f; border-color: #d43f3a;
}
.btn-danger .badge { color: #d9534f; background-color: #fff;
}
.btn-link { font-weight: normal; color: #428bca; cursor: pointer; border-radius: 0;
}
.btn-link,
.btn-link:active,
.btn-link[disabled],
fieldset[disabled] .btn-link { background-color: transparent; -webkit-box-shadow: none; box-shadow: none;
}
.btn-link,
.btn-link:hover,
.btn-link:focus,
.btn-link:active { border-color: transparent;
}
.btn-link:hover,
.btn-link:focus { color: #2a6496; text-decoration: underline; background-color: transparent;
}
.btn-link[disabled]:hover,
fieldset[disabled] .btn-link:hover,
.btn-link[disabled]:focus,
fieldset[disabled] .btn-link:focus { color: #999; text-decoration: none;
}
.btn-lg,
.btn-group-lg > .btn { padding: 10px 16px; font-size: 18px; line-height: 1.33; border-radius: 6px;
}
.btn-sm,
.btn-group-sm > .btn { padding: 5px 10px; font-size: 12px; line-height: 1.5; border-radius: 3px;
}
.btn-xs,
.btn-group-xs > .btn { padding: 1px 5px; font-size: 12px; line-height: 1.5; border-radius: 3px;
}
.btn-block { display: block; width: 100%; padding-right: 0; padding-left: 0;
}
.btn-block + .btn-block { margin-top: 5px;
}
input[type="submit"].btn-block,
input[type="reset"].btn-block,
input[type="button"].btn-block { width: 100%;
}
.fade { opacity: 0; -webkit-transition: opacity .15s linear; transition: opacity .15s linear;
}
.fade.in { opacity: 1;
}
button.close { -webkit-appearance: none; padding: 0; cursor: pointer; background: transparent; border: 0;
}
/*# sourceMappingURL=bootstrap.css.map */
| Developer | Calvin |
| Username | CalvinMorett |
| Uploaded | August 11, 2022 |
| Rating | 3 |
| Size | 4,633 Kb |
| Views | 40,480 |
Do you need developer help for Social Button Transition?
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!
Calvin (CalvinMorett) Script Codes
| Name | Size |
| A Pen by Calvin | 30,237 Kb |
| Portfolio Idea | 6,335 Kb |
| POE Rank Mockup | 4,156 Kb |
| Showcase 1 Gallery | 6,969 Kb |
| PORTFOLIO - CEMENT | 7,610 Kb |
| The word good is bad. | 2,101 Kb |
| Fixed-width Single Page Portfolio | 4,187 Kb |
| CoNTENT | 25,772 Kb |
| R | 4,338 Kb |
| Sectioned-bootstrap-portfolio | 10,149 Kb |
Create amazing Facebook ads 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 |
| React Markdown Previewer | C0d0er | 3,190 Kb |
| Mega Menu by Joni | Asakasinsky | 3,171 Kb |
| Elon Musk - Tribute Page - FreeCodeCamp | Yunnimun | 8,615 Kb |
| A Pen by Shidhin | Shidhincr | 5,015 Kb |
| Draggable directive | YahyaKacem | 2,277 Kb |
| Simple Carousel Pure CSS | Dangvanthanh | 4,080 Kb |
| Mobile first social buttons with no iframe | Alistairtweedie | 3,158 Kb |
| Blog | Rottingroom | 1,430 Kb |
| Flexbox Test | Icutpeople | 2,486 Kb |
| Sass Get Function | Lukewatts | 2,155 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!