HTML
<a href="https://www.messenger.com/t/PAGE_ID/"
class="fb-message-blue"
style="bottom: 150px; right: 150px;"
target="_blank">
<i></i> Message Us</a>
<a href="https://www.messenger.com/t/PAGE_ID/"
class="fb-message-white"
style="bottom: 100px; right: 150px;"
target="_blank">
<i></i> Message Us</a>
<p>
This is a custom floating <a href="https://goo.g
/XULhjh" target="_blank">Facebook Message Us</a>
button.<br/>
Why? The one Facebook provides isn't customizable.
</p>
<p>
Just replace <code>PAGE_ID</code> in the button href with
your page's ID.<br/><a href="https://goo.gl/UHq7rv" target="_blank"><sub>To find your ID, go to the About tab on
your page.</sub></a>
</p>
CSS
/*---------------------------
Blue Button
---------------------------*/
a.fb-message-blue {
font-size: 16px;
font-family: Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background-color: #0084ff;
border: 1px solid #0084ff;
width: 127px;
height: 35px;
line-height: 35px;
position: fixed;
border-radius: 3px;
outline: none;
-webkit-transition: all ease .15s;
-o-transition: all ease .15s;
-moz-transition: all ease .15s;
transition: all ease .15s;
}
a.fb-message-blue:hover {
background-color: #2093ff;
border: 1px solid #2093ff;
-webkit-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.2);
box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.2);
/* transform: scale(1.15); */ /* uncomment to add zoom effect */
}
a.fb-message-blue:focus {
background-color: #0084ff;
border: 1px solid #0084ff;
-webkit-box-shadow: inset 0px 0px 8px 0px rgba(0,0,0,0.3);
-moz-box-shadow: inset 0px 0px 8px 0px rgba(0,0,0,0.3);
box-shadow: inset 0px 0px 8px 0px rgba(0,0,0,0.3);
}
.fb-message-blue i {
background-image: url('https://i.imgur.com/hjwozo7.png');
background-repeat: no-repeat;
background-size: 17px;
background-position: 7px 9px;
top: -1px;
height: 18px;
width: 17px;
padding: 10px 7px;
float: left;
}
/*---------------------------
White Button
---------------------------*/
a.fb-message-white {
font-size: 16px;
font-family: Helvetica, Arial, sans-serif;
text-decoration: none;
color: #0084ff;
background-color: #fff;
border: 1px solid #ececec;
width: 127px;
height: 35px;
line-height: 35px;
position: fixed;
border-radius: 3px;
outline: none;
-webkit-transition: all ease .15s;
-o-transition: all ease .15s;
-moz-transition: all ease .15s;
transition: all ease .15s;
}
a.fb-message-white:hover {
background-color: #fafafa;
border: 1px solid #ccc;
-webkit-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.2);
box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.2);
/* transform: scale(1.15); */ /* uncomment to add zoom effect */
}
a.fb-message-white:focus {
background-color: #fff;
border: 1px solid #bbb;
-webkit-box-shadow: inset 0px 0px 8px 0px rgba(0,0,0,0.3);
-moz-box-shadow: inset 0px 0px 8px 0px rgba(0,0,0,0.3);
box-shadow: inset 0px 0px 8px 0px rgba(0,0,0,0.3);
}
.fb-message-white i {
background-image: url('https://i.imgur.com/WFeWHxl.png');
background-repeat: no-repeat;
background-size: 17px;
background-position: 7px 9px;
top: -1px;
height: 18px;
width: 17px;
padding: 10px 7px;
float: left;
}
/* Demo settings. Do not include. */
body{background-color:#fff;padding-top:100px;}
p{color:#666;font-size:18px;line-height:1.3;
text-align:center;
font-family:'Helvetica-Neue',Helvetica,Arial,sans-serif;}
p a{color:#0084ff;text-decoration: none;}
p a:hover{text-decoration:underline;}
p sub{color:#888;font-size:11px;cursor:help;}
code {color:#f35e5c;}
