Last active
December 14, 2015 06:29
-
-
Save tomhodgins/5043231 to your computer and use it in GitHub Desktop.
jQuery auto-width animated button. This adds onto the default Bootstrap buttons - and for now it relies on pixel-padding so you would need to tweak it to use it with btn-large, btn-small, and btn-mini sizes. Right now it measures the first occurrence of btn-animated - I need to figure out how to record the width for each occurrence and then retr…
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>jQuery Animated Bootstrap Button</title> | |
| <!-- Bootstrap: with responsive, no icons --> | |
| <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.no-icons.min.css" rel="stylesheet"> | |
| <!-- FontAwesome --> | |
| <link href="http://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet"> | |
| <!-- Source Sans via google Web Fonts --> | |
| <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic&subset=latin,latin-ext' rel='stylesheet' type='text/css'> | |
| <!-- jQuery --> | |
| <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> | |
| <!-- Boostrap JavaScript --> | |
| <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script> | |
| </head> | |
| <body> | |
| <!-- Add your Custom HTML Here --> | |
| <div class="container"> | |
| <div class="row-fluid"> | |
| <div class="span10 offset1 hero-unit democontainer"> | |
| <h1 class="center" style="margin-bottom:20px;">jQuery Animated Button</h1> | |
| <p class="center"><a data-target="#togglecontent" data-toggle="collapse" class="btn btn-inverse btn-animated">how to</a></p> | |
| <div class="row-fluid" id="togglecontent" class="collapse" > | |
| <div class="span12 demo"> | |
| hello | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Add your custom JavaScript here --> | |
| <script type="text/javascript"> | |
| // Let's run the following code once the document has loaded | |
| $(document).ready(function(){ | |
| // Let's record the width of the icon on the button | |
| var iconwidth = $('.btn-animated i').width(); | |
| // Let's record the width of the button when 'width: auto;' in CSS | |
| var autoWidth = $('.btn-animated').width(); | |
| // Let's make the collapsed width 12 pixels wider than the icon | |
| var collapseWidth = (iconwidth + 12); | |
| // Now that the page has loaded let's shrink that icon down from | |
| // 'width: auto;' to 12 pixels wider than the icon. If JavaScript | |
| // doesn't load then icon will just appear with 'width: auto;' | |
| $('.btn-animated').css('width', collapseWidth); | |
| // On hover, animate to the already stored 'autoWidth' | |
| $('.btn-animated').hover(function() { | |
| $(this).animate({ width: autoWidth }, 'fast' ) | |
| }, | |
| // After hover, animate back to the already stored 'collapseWidth' | |
| function() { | |
| $(this).animate({width: collapseWidth}, 'fast' ) | |
| } | |
| ); | |
| // initialize the toggle box | |
| $('#togglecontent').collapse('hide'); | |
| }); | |
| </script> | |
| <!-- Add your custom CSS here --> | |
| <style> | |
| * { | |
| font-family: 'Source Sans Pro', sans-serif; | |
| } | |
| .democontainer { | |
| margin-top: 100px; | |
| padding: 100px auto; | |
| } | |
| .center { | |
| text-align: center; | |
| } | |
| #togglecontent .demo { | |
| background: #fff; | |
| border-radius: 7px; | |
| margin: 15px inherit; | |
| padding: 15px inherit; | |
| font-weight: 400; | |
| font-size: 12pt; | |
| line-height: 16pt; | |
| padding: 30px; | |
| box-shadow: inset #efefef 0px 5px 50px, inset #fff 0px 1px 1px; | |
| border: 1px solid #eaeaea; | |
| box-sizing: border-box; | |
| } | |
| .btn-animated { | |
| width: auto; | |
| display: inline-block; | |
| overflow: hidden; | |
| font-weight: 400; | |
| padding-left: 7px; | |
| white-space: nowrap; | |
| -moz-transition: all 0.3s ease-in-out; | |
| -o-transition: all 0.3s ease-in-out; | |
| transition: all 0.3s ease-in-out; | |
| } | |
| .btn-animated:before { | |
| content: "\f005"; | |
| font-family: 'FontAwesome'; | |
| margin-right: 10px; | |
| font-size: 130%; | |
| position: relative; | |
| top: 2px; | |
| line-height: inherit; | |
| } | |
| .btn { | |
| -webkit-touch-callout: none; | |
| -webkit-user-select: none; | |
| -khtml-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| user-select: none; | |
| -webkit-user-drag: none; | |
| -moz-user-drag: none; | |
| user-drag: none; | |
| } | |
| </style> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment