Sticky Buttons

Explore the Sticky Buttons Documentation to seamlessly integrate it into your website.

Info

Overview

Sticky Buttons is meant to be easily implemented into almost any website or CMS system with some basic knowledge of HTML, JS, CSS and/or server-side scripting.

It is a framework for easy installation, customization, and development. It is not a CMS plugin, module or widgethence it needs to be installed manually. Sticky Buttons does not contain premade designs, it is a layout/framework for your custom notification design/s for static websites or dynamic (CMS).

Package contents

  1. Quick start - includes a single demo for a quick start
  2. Demo layouts - include basic demo layouts for reference
  3. Documentation
  4. Source
  5. changelog.txt

The structure

Sticky Buttons is made from the html elements which define the layout, CSS for basic layout design and JS for actions

HTML

The main HTML structure of the menu consists of list items and switchers. Each item contains a link, icon, and optional tooltip. Here is the structure with 5 items. 

<ul class="sticky-buttons -large -left-center -space -slide">
<li class="white black">
    <a href="#" target="_blank">
        <span class="sb-icon fas fa-plug"></span>
        <span class="sb-label">Products</span>
    </a>
</li>
<li class="black orange">
    <a href="#" target="_blank">
        <span class="sb-icon fas fa-shopping-cart"></span>
        <span class="sb-label -visible">Buy Now</span>
    </a>
</li>
<li class="pink white">
    <a href="#" data-type="email">
        <span class="sb-icon fas fa-envelope"></span>
        <span class="sb-label">Share via Email</span>
    </a>
</li>
<li class="white blue">
    <a href="#" data-type="facebook">
        <span class="sb-icon fab fa-facebook"></span>
        <span class="sb-label">Share on Facebook</span>
    </a>
</li>
<li class="yellow green">
    <a href="#" data-type="print">
        <span class="sb-icon fas fa-print"></span>
        <span class="sb-label">Print</span>
    </a>
</li>
</ul>

CSS

This menu contains two CSS files:
  • main.css - demo page styles
  • sticky-buttons.css - required menu styles
The file "sticky-buttons.css" contains all of the specific styling. The file is separated into sections:
  • Reset
  • Main Style
  • Size
  • Shapes
  • Position
  • Animations
  • Colors
If you would like to edit a specific section, simply find the appropriate label in the CSS file.

Quick install

  1. Include necessary CSS
  2. Copy HTML code of the menu from one of demo files.
  3. Replace demo menu elements with yours.
<link rel="stylesheet" href="css/sticky-buttons.css">

Options

Label Animation Effects

There are 8 animation effects for label that you can use. All you need is to add the appropriate class to menu container. For example, if you want the "Slide" effect, class name should be: "-slide". You can find all available effects and classes in table below. 
<ul class="sticky-buttons -slide">
Effect Class name
Fade -fade
Slide -slide
Slide-out -slide-out
Zoom -zoom
Rotate -rotate
Rotate zoom -rotate-zoom
Flip-x -flip-x
Flip-y -flip-y

Position

There are 12 defined menu positions. To use one of them you need to add appropriate class to menu container. For example, if you want the "Top-left" position, class name should be: "-top-left". You can find all available positions and classes in table below. 
<ul class="sticky-buttons -left-center">
Position Class name
Top-left -top-left
Top-center -top-center
Top-right -top-right
Bottom-left -bottom-left
Bottom-center -bottom-center
Bottom-right -bottom-right
Left Center -left-center
Left Top -left-top
Left Bottom -left-bottom
Right Center -right-center
Right Top right-top
Right Bottom -right-bottom

Shape

There are 4 possible shapes of the buttons. To use one of them you need to add appropriate class to menu container. For example, if you want the "Rounded square" shape, class name should be: "-rsquare". You can find all available shapes and classes in table below. 
<ul class="sticky-buttons -circle">
Shape Class name
Circle -circle
Ellipse -ellipse
Square -square
Rounded square -rsquare

Size

There are 3 possible size of the buttons. To use one of them you need to add appropriate class to menu container. For example, if you want the "small" size, class name should be: "-small". You can find all available sizes and classes in table below. 
<ul class="sticky-buttons -large">
Size Class name
Size -small
Medium -medium
Large -large

Hold Open

You can hold open the label. For this option you must add the class -visible to label 
<span class="sb-label -visible">Buy Now</span>

Colors

There are 12 defined color combinations. To use one of them you need to add color classes to <li> tag. For example, if you want the orange background color and black color for the icon, the classes should be: "black orange". When you hover on the icon the background change on black color and icon color change on orange. You can find all the available colors and attribute value in the table below. 
<li class="black orange">
Color classes
white
grey
black
red
orange
yellow
lime
green
cyan
blue
purple
pink

Space

To add space between elements, use class -space for tag ul 
<ul class="sticky-buttons -space">

Shadow

For add shadow for menu, use class -space for tag ul 
<ul class="sticky-buttons -space">

Actions

For add a specific action to the item, you must include the script actions.js on the page before tag /body 
<script src="js/actions.js"></script>
Add the attribute data-type to tag. Example for share page in Facebook: 
<a href="#" data-type="facebook">
Action Attribute data-type
Print page print
Go to the back back
Go to the forward forward
Share on Facebook facebook
Share on VK vk
Share on Twitter twitter
Share on Linkedin linkedin
Share on Odnoklassniki odnoklassniki
Share on Pinterest pinterest
Share on Xing xing
Share on Myspace myspace
Share on Weibo weibo
Share on Buffer buffer
Share on Stumbleupon stumbleupon
Share on Reddit reddit
Share on Tumblr tumblr
Share on Blogger blogger
Share on Livejournal livejournal
Share on Pocket pocket
Share on Telegram telegram
Share on Skype skype
Share on Email email

Sources and Credits

I've used the following images, icons or other files as listed.

Tricks and tips

Debug

If you're stuck with your layout and have issues you can't fix immediately, I recommend you first try to debug the site with firebug or native browser element inspector (eg. right click --> Inspect element). This will also help you build your custom layout faster and understand the scheme of how things work in Sticky buttons.

Use minified version

From the performance point it is good practice to use minified css and js version of the Sticky buttons CSS.

Release Notes

= 1.0 =
  • Initail Release