<style>
    .style-7 span {
        padding: 16px 12px 4px 12px;
        font-weight: bold;
        font-size: 14px;
        display: block;
        position: relative;
        border-radius: 2px;
        -ms-transform: rotate(90deg) translate(0, -20px);
        -webkit-transform: rotate(90deg) translate(0, -20px);
        transform: rotate(90deg) translate(0, -20px);
        transition: background 0.2s, right 0.2s;
        right: -27px;
    }
    
    /* When Hover */
    .style-7 span:hover {
        transition: background 0.2s, right 0.2s;
        right: -20px;
    }
    </style><style>
    .style-7 span {
        padding: 16px 12px 4px 12px;
        font-weight: bold;
        font-size: 14px;
        display: block;
        position: relative;
        border-radius: 2px;
        -ms-transform: rotate(90deg) translate(0, -20px);
        -webkit-transform: rotate(90deg) translate(0, -20px);
        transform: rotate(90deg) translate(0, -20px);
        transition: background 0.2s, right 0.2s;
        right: -27px;
    }
    
    /* When Hover */
    .style-7 span:hover {
        transition: background 0.2s, right 0.2s;
        right: -20px;
    }
    </style><style>
    .style-7 span {
        padding: 16px 12px 4px 12px;
        font-weight: bold;
        font-size: 14px;
        display: block;
        position: relative;
        border-radius: 2px;
        -ms-transform: rotate(90deg) translate(0, -20px);
        -webkit-transform: rotate(90deg) translate(0, -20px);
        transform: rotate(90deg) translate(0, -20px);
        transition: background 0.2s, right 0.2s;
        right: -27px;
    }
    
    /* When Hover */
    .style-7 span:hover {
        transition: background 0.2s, right 0.2s;
        right: -20px;
    }
    </style><style>
    .style-7 span {
        padding: 16px 12px 4px 12px;
        font-weight: bold;
        font-size: 14px;
        display: block;
        position: relative;
        border-radius: 2px;
        -ms-transform: rotate(90deg) translate(0, -20px);
        -webkit-transform: rotate(90deg) translate(0, -20px);
        transform: rotate(90deg) translate(0, -20px);
        transition: background 0.2s, right 0.2s;
        right: -27px;
    }
    
    /* When Hover */
    .style-7 span:hover {
        transition: background 0.2s, right 0.2s;
        right: -20px;
    }
    </style><style>
    .style-7 span {
        padding: 16px 12px 4px 12px;
        font-weight: bold;
        font-size: 14px;
        display: block;
        position: relative;
        border-radius: 2px;
        -ms-transform: rotate(90deg) translate(0, -20px);
        -webkit-transform: rotate(90deg) translate(0, -20px);
        transform: rotate(90deg) translate(0, -20px);
        transition: background 0.2s, right 0.2s;
        right: -27px;
    }
    
    /* When Hover */
    .style-7 span:hover {
        transition: background 0.2s, right 0.2s;
        right: -20px;
    }
    </style><style>
    .style-7 span {
        padding: 16px 12px 4px 12px;
        font-weight: bold;
        font-size: 14px;
        display: block;
        position: relative;
        border-radius: 2px;
        -ms-transform: rotate(90deg) translate(0, -20px);
        -webkit-transform: rotate(90deg) translate(0, -20px);
        transform: rotate(90deg) translate(0, -20px);
        transition: background 0.2s, right 0.2s;
        right: -27px;
    }
    
    /* When Hover */
    .style-7 span:hover {
        transition: background 0.2s, right 0.2s;
        right: -20px;
    }
    </style>{"id":1293,"date":"2018-07-11T16:41:06","date_gmt":"2018-07-11T11:11:06","guid":{"rendered":"https:\/\/holithemes.com\/plugins\/click\/?p=1293"},"modified":"2018-07-11T16:41:06","modified_gmt":"2018-07-11T11:11:06","slug":"style-7-shortcode","status":"publish","type":"post","link":"https:\/\/holithemes.com\/plugins\/click\/style-7-shortcode\/","title":{"rendered":"Style-7 &#8211; Shortcode"},"content":{"rendered":"\n<p>style-7 is not well suited to add within\u00a0the content, but there is a shortcode. Please\n\t<g class=\"gr_ gr_46 gr-alert sel gr_spell gr_replaced gr_inline_cards gr_disable_anim_appear ContextualSpelling ins-del multiReplace\" id=\"46\" data-gr-id=\"46\">check-in<\/g> test websites before adding in production sites.<\/p>\n\n\n\n<p>This vertical bar will stay to the right side of shortcode added place, with in that content block<\/p>\n\n\n\n<p>If added in a widget, with in that widget area, appear to the right side where shortcode is added. .<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">[click style=7]<\/pre>\n\n\n<style>\r\n    .style-7 span {\r\n        padding: 16px 12px 4px 12px;\r\n        font-weight: bold;\r\n        font-size: 14px;\r\n        display: block;\r\n        position: relative;\r\n        border-radius: 2px;\r\n        -ms-transform: rotate(90deg) translate(0, -20px);\r\n        -webkit-transform: rotate(90deg) translate(0, -20px);\r\n        transform: rotate(90deg) translate(0, -20px);\r\n        transition: background 0.2s, right 0.2s;\r\n        right: -27px;\r\n    }\r\n    \r\n    \/* When Hover *\/\r\n    .style-7 span:hover {\r\n        transition: background 0.2s, right 0.2s;\r\n        right: -20px;\r\n    }\r\n    <\/style>\r\n    <div class=\"wca_shortcode ht-click-analytics style-7 style-7-sc\" style=\"  cursor: pointer; display: inline; z-index: 9999;  width: 400px\"  data-htclick=\"style-7-sc\" onclick=\" window.open('https:\/\/api.whatsapp.com\/send?phone=919494429789&text=https:\/\/holithemes.com\/plugins\/click\/style-7-shortcode\/, Hello, How are you', '_blank'); \" >\r\n    \r\n    <span style=\"position: absolute; background-color: #1798F7; color: #fff; border: '1px solid #144866 ' \" onmouseover=\"this.style.color= '#fff' ; this.style.backgroundColor = '#1d89d8' ; this.style.border= '1px solid #144866' ;\" onmouseout=\"this.style.color= '#fff' ; this.style.backgroundColor = '#1798F7' ; this.style.border= '1px solid #144866 ' ;\"  >\r\n      WhatsApp us\r\n    <\/span>\r\n\r\n    <\/div>\r\n    \n\n\n\n<h3 class=\"wp-block-heading\">Attributes Specific to Style-7<\/h3>\n\n\n\n<p><strong>s7_text<\/strong> &#8211;\u00a0To change the text.<\/p>\n\n\n\n<p><strong>s7_text_color<\/strong> &#8211;\u00a0To change the text color.<\/p>\n\n\n\n<p><strong>s7_text_color_hover<\/strong> &#8211;\u00a0To change the color\u00a0of\u00a0text hover.<\/p>\n\n\n\n<p><strong>s7_background_color<\/strong> &#8211;\u00a0To change the\u00a0Background\u00a0color.<\/p>\n\n\n\n<p><strong>s7_background_color_hover<\/strong> &#8211;\u00a0To change the color\u00a0of Background on hover.<\/p>\n\n\n\n<p><strong>s7_border_color<\/strong>\u00a0\u2013\u00a0To change the Background color.<\/p>\n\n\n\n<p><strong>s7_border_color_hover \u2013<\/strong>\u00a0To change the color of border on hover.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Other Attributes<\/h3>\n\n\n\n<p><strong>num<\/strong> \u2013 To change the number\u00a0<br\/><strong>style<\/strong> \u2013 ( e.g. style=1 \u2013 right now there are 8 styles )<br\/><strong>text<\/strong> &#8211;\u00a0To add Pre-filled text.<br\/>( E.g.\u00a0 text= &#8220;To the sales team:\u201d )<br\/><strong>position<\/strong>\u00a0\u00a0\u2013\u00a0 To change the position\u00a0<br\/>E.g. position=fixed\u00a0 \u2013 to add fixed position style,\u00a0 any\u00a0 CSS positions<br\/><strong>top<\/strong>\u00a0\u00a0\u2013\u00a0 ( E.g.\u00a0 \u2013\u00a0 left=10px , left=2% )<br\/><strong>right<\/strong>\u00a0\u00a0\u2013\u00a0 ( E.g.\u00a0 \u2013\u00a0 left=10px , left=2%)<br\/><strong>bottom<\/strong>\u00a0\u00a0\u2013\u00a0 ( E.g.\u00a0 \u2013\u00a0 left=10px , left=2% )<br\/><strong>left<\/strong>\u00a0\u00a0\u2013\u00a0 ( E.g.\u00a0 \u2013\u00a0 left=10px , left=2% )<br\/><br\/><\/p>\n\n\n\n<p><strong>Sample Example:<\/strong><\/p>\n\n\n\n<p>To Change the text, text color hover, background color and background color hover.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">[click style=7 return_type=\"share\" share_text=\"Check out this Awesome Website{{url}}\"  s7_text=\"Share this post\" s7_text_color_hover=\"#cc3fc2\" s7_background_color=\"#1de0d0\"]<\/pre>\n\n\n<style>\r\n    .style-7 span {\r\n        padding: 16px 12px 4px 12px;\r\n        font-weight: bold;\r\n        font-size: 14px;\r\n        display: block;\r\n        position: relative;\r\n        border-radius: 2px;\r\n        -ms-transform: rotate(90deg) translate(0, -20px);\r\n        -webkit-transform: rotate(90deg) translate(0, -20px);\r\n        transform: rotate(90deg) translate(0, -20px);\r\n        transition: background 0.2s, right 0.2s;\r\n        right: -27px;\r\n    }\r\n    \r\n    \/* When Hover *\/\r\n    .style-7 span:hover {\r\n        transition: background 0.2s, right 0.2s;\r\n        right: -20px;\r\n    }\r\n    <\/style>\r\n    <div class=\"wca_shortcode ht-click-analytics style-7 style-7-sc\" style=\"  cursor: pointer; display: inline; z-index: 9999;  width: 400px\"  data-htclick=\"style-7-sc\" onclick=\" window.open('https:\/\/api.whatsapp.com\/send?text=Check out this Awesome Websitehttps:\/\/holithemes.com\/plugins\/click\/style-7-shortcode\/', '_blank'); \" >\r\n    \r\n    <span style=\"position: absolute; background-color: #1de0d0; color: #fff; border: '1px solid #144866 ' \" onmouseover=\"this.style.color= '#cc3fc2' ; this.style.backgroundColor = '#1d89d8' ; this.style.border= '1px solid #144866' ;\" onmouseout=\"this.style.color= '#fff' ; this.style.backgroundColor = '#1de0d0' ; this.style.border= '1px solid #144866 ' ;\"  >\r\n      Share this post\r\n    <\/span>\r\n\r\n    <\/div>\r\n    \n\n\n\n<p>To make the style look at the fixed position on the screen &#8211; This style appears at the middle right side of this page.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">[click style=7 position=fixed bottom=50% right=0px]<\/pre>\n\n\n<style>\r\n    .style-7 span {\r\n        padding: 16px 12px 4px 12px;\r\n        font-weight: bold;\r\n        font-size: 14px;\r\n        display: block;\r\n        position: relative;\r\n        border-radius: 2px;\r\n        -ms-transform: rotate(90deg) translate(0, -20px);\r\n        -webkit-transform: rotate(90deg) translate(0, -20px);\r\n        transform: rotate(90deg) translate(0, -20px);\r\n        transition: background 0.2s, right 0.2s;\r\n        right: -27px;\r\n    }\r\n    \r\n    \/* When Hover *\/\r\n    .style-7 span:hover {\r\n        transition: background 0.2s, right 0.2s;\r\n        right: -20px;\r\n    }\r\n    <\/style>\r\n    <div class=\"wca_shortcode ht-click-analytics style-7 style-7-sc\" style=\" position:fixed;right:0px;bottom:50%; cursor: pointer; display: inline; z-index: 9999;  width: 400px\"  data-htclick=\"style-7-sc\" onclick=\" window.open('https:\/\/api.whatsapp.com\/send?phone=919494429789&text=https:\/\/holithemes.com\/plugins\/click\/style-7-shortcode\/, Hello, How are you', '_blank'); \" >\r\n    \r\n    <span style=\"position: absolute; background-color: #1798F7; color: #fff; border: '1px solid #144866 ' \" onmouseover=\"this.style.color= '#fff' ; this.style.backgroundColor = '#1d89d8' ; this.style.border= '1px solid #144866' ;\" onmouseout=\"this.style.color= '#fff' ; this.style.backgroundColor = '#1798F7' ; this.style.border= '1px solid #144866 ' ;\"  >\r\n      WhatsApp us\r\n    <\/span>\r\n\r\n    <\/div>\r\n    \n","protected":false},"excerpt":{"rendered":"<p>style-7 is not well suited to add within\u00a0the content, but there is a shortcode. Please check-in test websites before adding in production sites. This vertical bar will stay to the right side of shortcode added place, with in that content block If added in a widget, with in that widget area, appear to the right &hellip;<\/p>\n<p class=\"read-more\"> <a class=\"\" href=\"https:\/\/holithemes.com\/plugins\/click\/style-7-shortcode\/\"> <span class=\"screen-reader-text\">Style-7 &#8211; Shortcode<\/span> Read More &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"footnotes":""},"categories":[3,4],"tags":[],"class_list":["post-1293","post","type-post","status-publish","format-standard","hentry","category-docs","category-styles"],"_links":{"self":[{"href":"https:\/\/holithemes.com\/plugins\/click\/wp-json\/wp\/v2\/posts\/1293","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/holithemes.com\/plugins\/click\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/holithemes.com\/plugins\/click\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/holithemes.com\/plugins\/click\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/holithemes.com\/plugins\/click\/wp-json\/wp\/v2\/comments?post=1293"}],"version-history":[{"count":0,"href":"https:\/\/holithemes.com\/plugins\/click\/wp-json\/wp\/v2\/posts\/1293\/revisions"}],"wp:attachment":[{"href":"https:\/\/holithemes.com\/plugins\/click\/wp-json\/wp\/v2\/media?parent=1293"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/holithemes.com\/plugins\/click\/wp-json\/wp\/v2\/categories?post=1293"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/holithemes.com\/plugins\/click\/wp-json\/wp\/v2\/tags?post=1293"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}