It's a plugin that make it possible for any button to float on it's parent div
<link href="css/bootstrap-magic-button.css" rel="stylesheet">
<script src="jquery.hoverIntent.js"></script>
<script src="bootstrap-magic-button.js"></script>
class="magicBtn"
and data-image="path/to/image.png"
to your buttons $('.magicBtn').magicBtn('show');
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');
This is the most basic magic button, the default behavior is to stick on the right side of div which is containing magic buttons
<div class="well span3">
<p>This is the most basic magic button, ...</p>
<button class="magicBtn" data-image="../img/msg.png"/>
</div>
Add a toggle effect using the data-toggle="magicBtn"
<button class="magicBtn" data-image="../img/msg.png" data-toggle="magicBtn"/>
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"/>
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');