FAB Implementation

by AntonLapshin

HTML

<script src="https://fonts.googleapis.com/css?family=Lato"></script>

CSS

.mfb-component--bl,
.mfb-component--br,
.mfb-component--tl,
.mfb-component--tr {
    box-sizing: border-box;
    margin: 25px;
    position: fixed;
    white-space: nowrap;
    z-index: 30;
    padding-left: 0;
    list-style: none
}
.mfb-component--bl *,
.mfb-component--bl:after,
.mfb-component--bl:before,
.mfb-component--br *,
.mfb-component--br:after,
.mfb-component--br:before,
.mfb-component--tl *,
.mfb-component--tl:after,
.mfb-component--tl:before,
.mfb-component--tr *,
.mfb-component--tr:after,
.mfb-component--tr:before {
    box-sizing: inherit
}
.mfb-component--tl {
    left: 0;
    top: 0
}
.mfb-component--tr {
    right: 0;
    top: 0
}
.mfb-component--bl {
    left: 0;
    bottom: 0
}
.mfb-component--br {
    right: 0;
    bottom: 0
}
.mfb-component__button--child,
.mfb-component__button--main {
    background-color: #E40A5D;
    display: inline-block;
    border: none;
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(0, 0, 0, .14), 0 4px 8px rgba(0, 0, 0, .28);
    cursor: pointer;
    outline: 0;
    padding: 0;
    position: relative;
    -webkit-user-drag: none;
    font-weight: regular;
    color: #f1f1f1
}
.mfb-component__list {
    list-style: none;
    margin: 0;
    padding: 0
}
.mfb-component__list>li {
    display: block;
    position: absolute;
    top: 0;
    right: 1px;
    padding: 10px 0;
    margin: -10px 0
}
.mfb-component__child-icon,
.mfb-component__icon,
.mfb-component__main-icon--active,
.mfb-component__main-icon--resting {
    position: absolute;
    font-size: 18px;
    text-align: center;
    line-height: 54px;
    width: 100%
}
.mfb-component__wrap {
    padding: 25px;
    margin: -25px
}
[data-mfb-state=open] .mfb-component__child-icon,
[data-mfb-state=open] .mfb-component__icon,
[data-mfb-state=open] .mfb-component__main-icon--active,
[data-mfb-state=open] .mfb-component__main-icon--resting,
[data-mfb-toggle=hover]:hover .mfb-component__child-icon,
[data-mfb-toggle=hover]:hover...

JavaScript

window.addEventListener('load', function(){

  FAB.init({

    view: FAB.views.lightbox,

    label: 'Our Homepage',
    icon: '<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/><path d="M0 0h24v24H0z" fill="none"/>',
    action: {
      type: FAB.actionTypes.redirect,
      data: 'http://ilidc.com/'
    },
   
    buttons: [
    
      {
        label: 'Intensive English',
				icon: '<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 9h12v2H6V9zm8 5H6v-2h8v2zm4-6H6V6h12v2z"/><path d="M0 0h24v24H0z" fill="none"/>',
				action: {
          type: FAB.actionTypes.redirect,
          data: 'http://ilidc.com/esl/iep/',
        }
      },
      
      {
        label: 'Foreign Languages',
				icon: '<path d="M0 0h24v24H0z" fill="none"/><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95c-.32-1.25-.78-2.45-1.38-3.56 1.84.63 3.37 1.91 4.33 3.56zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2 0 .68.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56-1.84-.63-3.37-1.9-4.33-3.56zm2.95-8H5.08c.96-1.66 2.49-2.93 4.33-3.56C8.81 5.55 8.35 6.75 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2 0-.68.07-1.35.16-2h4.68c.09.65.16 1.32.16 2 0 .68-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95c-.96 1.65-2.49 2.93-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2 0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z"/>',
				action: {
          type: FAB.actionTypes.redirect,
          data: 'http://ilidc.com/flp/',
        }
      },
      
      {
        label: 'Enroll Now',
				icon: '<path d="M0 0h24v24H0z" fill="none"/><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12...