Question

我正在尝试在我的网站上嵌入一个Facebook Messenger按钮，以便人们与我取得联系。我有HTML代码工作但我想格式化它像一个Messenger按钮。有人可以帮帮我吗？

Answer 1

好的，如果您从头开始，那么这就是我为您提供的内容，包括HTML和CSS：

    <a id="msnnr_btn_anc" href="#mypage">

        <div id="messenger_button">
            <div class="messenger_column btn_label">
                <span>Message me</span>
            </div>
            <div class="messenger_column btn_icon">
                <img src="icon.svg" id="msngr_btn_icon">
            </div>
        </div>

    </a>

还有一些CSS：

   <style type="text/css">
        a#msnnr_btn_anc {
            position: relative;
            float: left;
        }

        div#messenger_button {
            position: relative;
            float: left;
            background: #2196F3;
            color: #fff;
            font-family: arial;
            border-radius: 3px;
            overflow: hidden;
            text-decoration: none;
        }

        .messenger_column {
            float: left;
            padding: 5px;
        }

        .messenger_column.btn_icon>#msngr_btn_icon {
            float: left;
            width: 28px;
        }

        .messenger_column.btn_label {
            padding: 10px;
            padding-right: 5px;
        }
    </style>

SVG


<?xml version="1.0" encoding="utf-8"?>
        <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 76.2 76.2" style="enable-background:new 0 0 76.2 76.2;" xml:space="preserve">
               <style type="text/css">
                   .icon{fill:#FFFFFF;}
                   .icon.blue{fill:#0084FF;}
               </style>

               <g>
                   <path class="icon" d="M38.1,0.2C17.3,0.2,0.4,15.9,0.4,35.3c0,11.1,5.5,20.9,14.1,27.4v13.4L27.3,69c3.4,1,7.1,1.5,10.8,1.5
    c20.8,0,37.7-15.7,37.7-35.1S58.9,0.2,38.1,0.2z M41.9,47.5l-9.6-10.3L13.5,47.5l20.6-22L44,35.8l18.5-10.3L41.9,47.5z" />
               </g>
            </svg>

如果你正在使用fb＆＃34;发送给信使＆＃34; API然后你可以使用他们给定的引用过度使用元素样式。

Answer 2

您可以简单地使用fb messenger图标图像作为链接。请检查以下代码段： Plunker

#fb_msg_icon:hover{
  background-color: #eeeeee;
}

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <a href="fb.com/msg/pk1" title="Get in touch with me">
      <img id="fb_msg_icon" width="10%" height="10%" src="http://store-images.s-microsoft.com/image/apps.7488.13510798886918977.69182166-f125-495d-80d2-44fdaab21523.8fcea13e-5d9a-48a9-9937-b26deeced1b5">
    </a>
  </body>

</html>

Facebook Messenger Button for Website

2 个答案: