Fork me on GitHub

Let your buttons fly


It's a plugin that make it possible for any button to float on it's parent div

Setup

  1. Include jQuery and jQueryui

  2. Include stylesheet and js files

    <link href="css/bootstrap-magic-button.css" rel="stylesheet">
    <script src="jquery.hoverIntent.js"></script>
    <script src="bootstrap-magic-button.js"></script>
  3. Include class="magicBtn" and data-image="path/to/image.png" to your buttons

  4. Start using :
    $('.magicBtn').magicBtn('show');
  5. It is preferable to add your own class to group of magic buttons, use that class to customize groups of magic buttons

    <button class="magicBtn myClass" ... /> 
    $('.myClass').magicBtn('show');


Examples:


Simple button


This is the most basic magic button, the default behavior is to stick on the right side of div which is containing magic buttons

Code:





<div class="well span3">
  <p>This is the most basic magic button, ...</p>

  <button class="magicBtn" data-image="../img/msg.png"/>
</div>

Toggle effect


Add a toggle effect using the data-toggle="magicBtn"




<button class="magicBtn" data-image="../img/msg.png" data-toggle="magicBtn"/>

Toggle image


Usedata-toggle-image to customize toggle image




<button class="magicBtn" data-image="../img/pin-off.png" data-toggle="magicBtn" data-toggle-image="../img/pin-on.png"/>

Hover effect


You can enable a hover effect over your buttons

jquery.hoverIntent is used in replacement of jQuery builtin hover




<button class="magicBtn hover" data-image="../img/pin-off.png" data-toggle="magicBtn" data-toggle-image="../img/pin-on.png"/>
$('.hover').magicBtn({hover: true});
$('.hover').magicBtn('show');