Add a very cool and beautiful HTML and CSS share button for blogspot
Hello guys, I've been a bit busy lately, but yesterday I had a little free time to make a blogspot share button using HTML and CSS without using JS. Initially, I intended to be a contact button only with too many shares, then I changed it to a share button for good and a little different. This code, I also refer to an article on the internet before. 😁😁
This code you can also edit into a contact button or a personal social network information button, I will leave the HTML code of both the share button and the personal social network information for those of you who do not know how to edit!
Guide
Step 1: Add the following CSS code to your theme usually between the <head>...</head>.
< style >
.social-container { position :fixed; height : 50px ; width : 50px ; border-radius : 40px ; background-color : var (--widgetbg); bottom : 30px ; left : 30px ; box-shadow : 0 12px 25px 0 rgb (30 30 30 / 4%); transition : 0.3s ease, box-shadow 0.1s 0.3s ease; z-index : 5 }
.social-check-label { z-index : 10 ; cursor :pointer; position :absolute; height : 50px ; width : 50px ; bottom : 0 ; left : 50% ; transform : translateX (-50%) rotate (0deg); border-radius : 100% ; transition : 0.3s ease}
.social-check-label :after , .social-check-label :before { content : '' ; position :absolute; top : 50% ; left : 50% ; transform : translate (-50%,-50%); height : 4px ; width : 35% ; border-radius : 2px ; background-color : #7577a9 }
.social-check-label :after { transform : translate (-50%,-50%) rotate (90deg)}
.social-button { position :absolute; height : 45px ; width : 45px ; left : 50% ; transform : translate (-50%,-50%) scale (0.75); transition : 0.3s ease, opacity 0.1s ease; background-size :cover !important ; backface-visibility :hidden; opacity : 0 }
.social-button > span { z-index : 3 ; position :absolute; left :- 100% ; background : #fff ; border-radius : 100px ; top : 50% ; transform : translateY (-50%); white-space :nowrap; box-shadow : 0 12px 25px 0 rgb (30 30 30 / 4%); padding : 8.25px 15px ; pointer-events :none;-webkit-user-select :none; -moz-user-select :none; -ms-user-select :none; user-select :none; opacity : 0 ; transition :all 0.2s ease-in-out}
.social-button :hover > span { left : calc (100% + 18.25px); opacity : 1 }
.social-button .facebook { top : 169.5px ; background : url ( "https://cdn.jsdelivr.net/gh/ngylduy/images/facebook-icon.png" ) no-repeat center}
.social-button .twitter { top : 169.5px ; background : url ( "https://cdn.jsdelivr.net/gh/ngylduy/images/twitter-icon.png" ) no-repeat center}
.social-button .pinterest { top : 169.5px ; background : url ( "https://cdn.jsdelivr.net/gh/ngylduy/images/pinterest-icon.png" ) no-repeat center}
.social-button .linkedin { top : 169.5px ; background : url ( "https://cdn.jsdelivr.net/gh/ngylduy/images/linkedin-icon.png" ) no-repeat center}
#socialcheckbox { display :none}
#socialcheckbox :checked ~ .social-container { height : 219.5px ; transition : 0.3s ease, box-shadow 0.1s ease}
#socialcheckbox :checked ~ .social-container > .social-button { opacity : 1 ; cursor :pointer}
#socialcheckbox :checked ~ .social-container > .social-button .facebook { top : 25px ; transition : 0.3s ease, opacity 0.33s 0.455s ease, top 0.33s 0.405s cubic-bezier (0,0,0.5,1.6)}
#socialcheckbox :checked ~ .social-container > .social-button .twitter { top : 61.75px ; transition : 0.3s ease, opacity 0.33s 0.455s ease, top 0.33s 0.405s cubic-bezier (0,0,0.5,1.6)}
#socialcheckbox :checked ~ .social-container > .social-button .pinterest { top : 99.25px ; transition : 0.3s ease, opacity 0.33s 0.455s ease, top 0.33s 0.405s cubic-bezier (0,0,0.5,1.6)}
#socialcheckbox :checked ~ .social-container > .social-button .linkedin { top : 137.25px ; transition : 0.3s ease, opacity 0.33s 0.455s ease, top 0.33s 0.405s cubic-bezier (0,0,0.5,1.6)}
#socialcheckbox :checked ~ .social-container > .social-check-label { transform : translateX (-50%) rotate (225deg)}
</ style >Step 2: Add the following HTML before the closing tag</body>
If you use the share button then use the code below:
< input id = 'socialcheckbox' type = 'checkbox' />
< div class = 'social-container' >
< a class = 'social-button facebook' expr:href = '"https://www.facebook.com/sharer.php?u=" + data:view.url.canonical' rel = 'nofollow noopener' target = '_blank' > < span > Share to Facebook </ span > </ a >
< a class = 'social-button twitter' expr:href = '"https://twitter.com/intent/tweet?url=" + data:view.url.canonical' rel = 'nofollow noopener' target = '_blank' > < span > Share to Twitter </ span > </ a >
< a class = 'social-button pinterest' expr:href = '"https://www.pinterest.com/pin/create/button/?url=" + data:view.url.canonical' rel = 'nofollow noopener' target = '_blank' > < span > Share to Pinterset </ span > </ a >
< a class = 'social-button linkedin' expr:href = '"https://www.linkedin.com/sharing/share-offsite/?url=" + data:view.url.canonical' rel = 'nofollow noopener' target = '_blank' > < span > Share to Linkedin </ span > </ a >
< label class = 'social-check-label' for = 'socialcheckbox' />
</ div >If you are using the personal social media button, use the code below:
< input id = 'socialcheckbox' type = 'checkbox' />
< div class = 'social-container' >
< a class = 'social-button facebook' href = '#' rel = 'nofollow noopener' target = '_blank' > < span > Follow Facebook author </ span > </ a >
< a class = 'social-button twitter' href = '#' rel = 'nofollow noopener' target = '_blank' > < span > Follow Twitter author </ span > </ a >
< a class = 'social-button pinterest' href = '#' rel = 'nofollow noopener' target = '_blank' > < span > Follow Pinterset Author </ span > </ a >
< a class = 'social-button linkedin' href = '#' rel = 'nofollow noopener' target = '_blank' > < span > Follow Linkedin Author </ span > </ a >
< label class = 'social-check-label' for = 'socialcheckbox' />
</ div >Button for personal social network information, remember to change the path in the properties href!
Step 3: Save changes.
Demo you can watch directly on this article page, it's in the lower left corner of the screen there. 😛 If
you have any questions, just comment below this article and I will answer.
Thanks for reading: Add a very cool and beautiful HTML and CSS share button for blogspot,Dont Forget to Book Mark The Blooger-store.com