CSS | How to use a floating button for the scheduling widget

Publié environ 1 an il y a par  Julien Pauthier

Publier un sujet
Julien Pauthier
Julien Pauthier Administrateur

Thanks to this blog post from Material Design Blog, you can use a couple of CSS to get a floating button opening the scheduling widget:

<style type="text/css">
.fab {
   width: auto;
   height: 40px;
   background-color: red;
   border-radius: 250px;
   box-shadow: 0 6px 10px 0 #666;
   transition: all 0.1s ease-in-out;
   color: white;
   text-align: center;
   line-height: 40px;
   position: fixed;
   right: 50px;
   bottom: 50px;

   font-family: Arial, Tahoma, Verdana, Sans-Serif;
   font-size: 18pt;

   padding-left: 15px;
   padding-right: 15px;
.fab:hover {
   box-shadow: 0 6px 14px 0 #666;
   transform: scale(1.05);
<div class="fab" id="scheduling-22452780" onclick='openScheduling(22452780)' style="cursor : pointer; border: 0">Book a meeting</div> 
<script type="text/javascript">
    var scheduling = {server: 'app.agendize.com', button: '2015635700205465', lang: 'en'};
<script type="text/javascript" src="https://app.agendize.com/web/scheduling.js"></script>

0 Votes

0 Commentaires

Connexion ou S'inscrire pour poster un commentaire