Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- # Код кнопки
- <script src="https://kit.fontawesome.com/ec705a4d25.js" crossorigin="anonymous"></script>
- <div class="wrapper-button">
- <div class="icon-button whatsapp">
- <div class="tooltip">WhatsApp</div>
- <span>
- <a href="https://google.com" style="text-decoration: none; color: #ffffff;">
- <i class="fab fa-whatsapp fa-2x"></i>
- </a>
- </span>
- </div>
- </div>
- <style type="text/css">
- .wrapper-button {
- display: inline-flex;
- }
- .wrapper-button .icon-button {
- position: fixed;
- background-color: #AE978F;
- right: 0px;
- bottom: 0px;
- color: #ffffff;
- border-radius: 50%;
- padding: 15px;
- margin: 10px;
- width: 50px;
- height: 50px;
- font-size: 18px;
- display: flex;
- justify-content: center;
- align-items: center;
- flex-direction: column;
- box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
- cursor: pointer;
- transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
- }
- .wrapper-button .tooltip {
- position: absolute;
- top: 0;
- font-size: 14px;
- background-color: #ffffff;
- color: #ffffff;
- padding: 5px 8px;
- border-radius: 5px;
- box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
- opacity: 0;
- pointer-events: none;
- transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
- }
- .wrapper-button .tooltip::before {
- position: absolute;
- content: "";
- height: 8px;
- width: 8px;
- background-color: #ffffff;
- bottom: -3px;
- left: 50%;
- transform: translate(-50%) rotate(45deg);
- transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
- }
- .wrapper-button .icon-button:hover .tooltip {
- top: -45px;
- opacity: 1;
- visibility: visible;
- pointer-events: auto;
- }
- .wrapper-button .icon-button:hover span,
- .wrapper-button .icon-button:hover .tooltip {
- text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
- }
- .wrapper-button .whatsapp:hover,
- .wrapper-button .whatsapp:hover .tooltip,
- .wrapper-button .whatsapp:hover .tooltip::before {
- background-color: #43d854;
- color: #ffffff;
- }
- </style>
- # Код таплинк (обрезанный)
- <!DOCTYPE html>
- <html prefix="og: http://ogp.me/ns#" lang="ru" data-format-date="d.m.Y" data-format-datetime="d.m.Y H:i">
- <head>
- <title></title>
- <meta name="description" content=""/>
- <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, shrink-to-fit=no"/>
- <link rel="dns-prefetch" href="https://mc.yandex.ru">
- <meta name="HandheldFriendly" content="true">
- <meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
- <link type='text/css' rel='stylesheet' href='//cdn.jsdelivr.net/gh/blacknot/taplink@1.2.4678/css/frontend.css'>
- <link rel="icon" href="https://s.taplink.ru/">
- <meta name="lazy-scripts-prefix" content="//cdn.jsdelivr.net/gh/blacknot/taplink@1.2.4678">
- <meta name="format-detection" content="telephone=no"/>
- <meta name="referrer" content="always">
- <link rel="canonical" href=""/>
- <link rel="image_src" href=""/>
- <meta property="og:type" content="website"/>
- <meta property="og:title" content=""/>
- <meta property="og:description" content="я"/>
- <meta property="og:url" content=""/>
- <meta property="og:site_name" content="Taplink"/>
- <meta property="og:image" content="">
- </head>
- <body>
- <div class="main theme-main">
- <div class=yandexmetrika data-id=44929738 data-simple=true></div>
- <div class=googletags data-id=G-HPJBN8S903></div>
- <style>
- "html": "<div class=\"wrapper-button\">\n <div class=\"icon-button whatsapp\">\n <div class=\"tooltip\">WhatsApp</div>\n <span>\n <a href=\"https://api.whatsapp.com/send?phone=70000000000&text=Здравствуйте!%20Хочу%20проконсультироваться.\" style=\"text-decoration: none; color: #ffffff;\">\n <i class=\"fab fa-whatsapp fa-2x\"></i>\n </a>\n </span>\n </div>\n </div>\n \n <style type=\"text/css\">\n .wrapper-button {\n display: inline-flex;\n z-index: 1000;\n }\n \n .wrapper-button .icon-button {\n position: fixed;\n z-index: 1000;\n background-color: #AE978F;\n right: 0px;\n bottom: 0px;\n color: #ffffff;\n border-radius: 50%;\n padding: 15px;\n margin: 10px;\n width: 50px;\n height: 50px;\n font-size: 18px;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);\n cursor: pointer;\n transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n }\n \n .wrapper-button .tooltip {\n position: absolute;\n top: 0;\n font-size: 14px;\n background-color: #ffffff;\n color: #ffffff;\n padding: 5px 8px;\n border-radius: 5px;\n box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);\n opacity: 0;\n pointer-events: none;\n transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n z-index: 1000;\n }\n \n .wrapper-button .tooltip::before {\n position: absolute;\n content: \"\";\n height: 8px;\n width: 8px;\n background-color: #ffffff;\n bottom: -3px;\n left: 50%;\n transform: translate(-50%) rotate(45deg);\n transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n z-index: 1000;\n }\n \n .wrapper-button .icon-button:hover .tooltip {\n top: -45px;\n opacity: 1;\n visibility: visible;\n pointer-events: auto;\n z-index: 1000;\n }\n \n .wrapper-button .icon-button:hover span,\n .wrapper-button .icon-button:hover .tooltip {\n text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);\n z-index: 1000;\n }\n \n .wrapper-button .whatsapp:hover,\n .wrapper-button .whatsapp:hover .tooltip,\n .wrapper-button .whatsapp:hover .tooltip::before {\n background-color: #43d854;\n color: #ffffff;\n z-index: 1000;\n }\n </style>"
- };
- window.data = {
- "page_id": 7191308,
- "fields": [{
- "section": null,
- "items": [{
- ]
- }],
- "options": []
- };
- </script>
- <script type='text/javascript' src='//cdn.jsdelivr.net/combine/npm/vue@2.6.11,npm/vue-router@3.0.7,gh/blacknot/taplink@1.2.4678/js/frontend.js'></script>
- <div class="page vue is-flex-fullheight is-ltr">
- <router-view></router-view>
- </div>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
