私は、私のウェブサイトにFacebookのメッセンジャーボタンを埋め込み、人々と連絡を取りたいと考えています。 HTMLコードは動作していますが、Messengerボタンのようにフォーマットしたいと思います。誰も私を助けることができますか?ウェブサイトのメッセンジャーボタンCSS
-2
A
答えて
1
オーケー、あなたが完全に起動しているかのように、ここではその後、スクラッチをfroms私は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「メッセンジャーに送る」APIを使用している場合、指定された参照を使用してエレメントスタイルを乗り越えることができます。
+0
ところで、あなたがfacebook apiを使用していない場合は、ちょうど私たちにそれを。なぜあなたが最初からそれをやりたいのかという具体的な理由がない限り。 [link](https://developers.facebook.com/docs/messenger-platform/plugin-reference/message-us) – Abelm
0
fbメッセンジャーアイコンイメージをリンクとして使用するだけです。 は、次のコードスニペットを確認してください: 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>
関連する問題
- 1. 複数のfacebookがメッセンジャーボタンに送信
- 2. メッセンジャーボタンがモバイルの右下に固定
- 3. GZippingウェブサイト(JS、CSS、PHP)
- 4. CSSのインラインナビゲーションメニューとウェブサイトのタイトル
- 5. 特定のウェブサイトのCSSレイアウト
- 6. ipad CSS対応ウェブサイトのバグ
- 7. HTML、CSS、画像応答ウェブサイト
- 8. ビューポートトリガーCSSアニメーション(水平ウェブサイト)
- 9. CSカートのウェブサイトのCSSの問題
- 10. ウェブサイト上のCSSスペースの削除
- 11. PSDまたは真のCSS [ウェブサイトのデザイン]
- 12. CSS - ウェブサイトがブラウザの中心にない
- 13. iPadのCSSウェブサイトに関する問題
- 14. CSSをウェブサイトに挿入する
- 15. 自分のCSSを使って自分のウェブサイトにウェブサイトを埋め込む?
- 16. モバイルデバイスとウェブサイトの画像のための絶対サイズCSS
- 17. CSSダイヤモンドの形状中心のウェブサイトの問題
- 18. CSSを使ってウェブサイトのコンテンツを別の場所に置く(
- 19. ウェブサイトを移動した後のCSSの問題
- 20. ウェブサイトの完成後にCSSのスプライトが変更される
- 21. 2つの同様のCSSファイルがウェブサイトにあります
- 22. ウェブサイトのコンテンツをCSSのヘッダーとフッターに合わせる
- 23. ウェブサイトのメニューボタンの画像をCSSに変換する方法
- 24. CSSアライメントは、私はPHP(HTML)やCSSで記述されたウェブサイトを持って
- 25. ウェブサイトの一般的なCSSパターンを取得するコード
- 26. htmlとcssのウェブサイトが検索エンジンに表示されない
- 27. ウェブサイト全体のコード、HTML、CSS、JavaScriptファイルをダウンロードできますか?
- 28. HTMLとCSSのウェブサイトが正しくクロールされない
- 29. PythonのウェブサイトからCSSメディアクエリを抽出する2.7
- 30. html/cssウェブサイトの下部に空白があります
はあなたのコードを共有するので、私たちは、あなたがこれまでに行っているものを見ると、あなたの問題にいくつかの光を当てることができます。 – ErvalhouS
コードを共有していただけますか? –