framework7.angular/kitchen-sink-material/floating-button.html

Full Featured Mobile HTML Framework For Building iOS & Android Apps using Angularjs

<div data-page="floating-button" class="page">
  <div class="navbar">
    <div class="navbar-inner">
      <div class="left"><a href="index.html" class="back link icon-only"><i class="icon icon-back"></i></a></div>
      <div class="center">Floating Action Button</div>
      <div class="right"><a href="#" class="open-panel link icon-only"><i class="icon icon-bars"></i></a></div>
    </div>
  </div>
  <div class="page-content">
    <div class="content-block">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae porta enim. Sed ultricies lacinia mauris, non tincidunt sem eleifend eget. Duis convallis quis sem non volutpat. Morbi risus lorem, dapibus et nulla ac, pharetra maximus elit. Etiam vitae lacus a dui hendrerit ornare vitae id est. Pellentesque ut tortor id sem maximus lobortis at egestas nulla. Nulla pretium, nunc et porta ullamcorper, sem lorem elementum massa, rhoncus ullamcorper odio dui vel mauris. Ut lobortis neque congue eros posuere blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. In sem dolor, tempus eu tellus quis, vulputate malesuada felis.</p>
    </div>
    <div class="list-block">
      <ul>
        <li><a href="floating-button-static.html" class="item-content item-link">
            <div class="item-media"><i class="icon icon-f7"></i></div>
            <div class="item-inner">
              <div class="item-title">Static Floating Action Button</div>
            </div></a></li>
        <li><a href="floating-button-dial.html" class="item-content item-link">
            <div class="item-media"><i class="icon icon-f7"></i></div>
            <div class="item-inner">
              <div class="item-title">Speed Dial</div>
              <div class="item-after"><span class="badge bg-green">NEW</span></div>
            </div></a></li>
        <li><a href="floating-button-popover.html" class="item-content item-link">
            <div class="item-media"><i class="icon icon-f7"></i></div>
            <div class="item-inner">
              <div class="item-title">Morph To Popover</div>
              <div class="item-after"><span class="badge bg-green">NEW</span></div>
            </div></a></li>
      </ul>
    </div>
  </div>
</div>