Home Web Design CSS CSS Circular Sharing Widget With jQuery | Social Share Icon’s Circle

CSS Circular Sharing Widget With jQuery | Social Share Icon’s Circle

October 26, 2019

5312

How we can create a sharing widget with a circular layout using HTML CSS JS? Solution: See this CSS Circular Sharing Widget With jQuery, Social Share Icon Circle.

Previously I have shared some social sharing related programs, it is also like that but it has a circular layout. Basically this type of circular widget contains social media links or profiles and shows it on click. After clicking, the social media icons will reveal with circular layout and circle animation.

Today you will learn to create Social Share Icon’s Circle program. Basically, there is a round button with a text when you will click on that button then there will appear 8 different social media icons. And all the social icons placed around the button with circle layout. On second click all icons will hide again.

So, Today I am sharing CSS Circular Sharing Widget With jQuery. There the whole layout is base on pure CSS and I have used jQuery for the toggle feature. And as we know jQuery is a JS library, that’s why I am putting this in the JavaScript category. And this program will a good practice for you about CSS, you can also use it on your website.

If you are thinking now how this sharing widget actually is, then see the preview given below.

Preview Of Social Share Icon’s Circle Layout

See this video preview to getting an idea of how this widget looks like.

Live Demo

Now you can see this visually, you also can see it live by pressing the button given above. If you like this, then get the source code of its.

CSS Circular Sharing Widget With jQuery Source Code

Before sharing source code, let’s talk about it. First, I have created a listand placed input and label inside the list items using HTML. I have created a separate list, checkbox input, and label for different icons. And I have put ID named serial-wise in numerical value, like 1,2,3, etc. All these times I have placed inside the main div, and all other files like CSS, JS I have linked in the HTML file.

Now using CSS, I have placed all the items in the right place as you can see in the preview. I have created as circle all the items using CSS border-radius command (info). All the icons are powered by the font-awesome library, I have linked the CDN in the HTML and put class names in the labels. And many other basic things I have done using CSS.

jQuery handling there the toggle feature and the circular rotate reveal animation. In the same way of reveal it hides on the second click, check live demo for understanding what I am talking about. Rotating hide and show animation is created using JS for() loop function. Left all other things you will understand after getting the codes, I can’t explain all in writing.

For creating this program you have to create 3 files. First for HTML, second for CSS, and the third for JavaScript. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

<!DOCTYPE html>
<!--Code By Webdevtrick ( https://webdevtrick.com )-->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Animated Circular Share | Webdevtrick.com</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.css" rel="stylesheet">
      <link rel="stylesheet" href="style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class='circle'>
  <ul>
    <li>
      <input id='1' type='checkbox'>
      <label for='1'><a href="#"><i class="fab fa-facebook"></i></a></label>
    </li>
    <li>
      <input id='2' type='checkbox'>
      <label for='2'><a href="#"><i class="fab fa-dribbble"></i></a></label>
    </li>
    <li>
      <input id='3' type='checkbox'>
      <label for='3'><a href="#"><i class="fab fa-pinterest"></i></a></label>
    </li>
    <li>
      <input id='4' type='checkbox'>
      <label for='4'><a href="#"><i class="fab fa-stumbleupon-circle"></i></a></label>
    </li>
    <li>
      <input id='5' type='checkbox'>
      <label for='5'><a href="#"><i class="fab fa-reddit"></i></i></a></label>
    </li>
    <li>
      <input id='6' type='checkbox'>
      <label for='6'><a href="#"><i class="fab fa-telegram"></i></a></label>
    </li>
    <li>
      <input id='7' type='checkbox'>
      <label for='7'><a href="#"><i class="fab fa-google-plus"></i></a></label>
    </li>
    <li>
      <input id='8' type='checkbox'>
      <label for='8'><a href="#"><i class="fab fa-twitter"></i></a></label>
    </li>
  </ul>
  <button>Share</button>
</div>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script  src="function.js"></script>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Animated Circular Share | Webdevtrick.com</title>

</head>

<body>

<ul>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

<button>Share</button>

</div>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

/* Code By Webdevtrick ( https://webdevtrick.com ) */
@import url(https://fonts.googleapis.com/css?family=Oswald:400,300,700);
html, body {
  height: 100%;
}
body {
  margin: 0;
  background: linear-gradient(#eee, #ccc);
  overflow: hidden;
}
.circle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 140px;
  height: 140px;
  margin-top: -70px;
  margin-left: -70px;
}
.circle, .circle button {
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
}
.circle button {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 10px;
  background: #428bca;
  border-radius: 50%;
  border: 0;
  color: white;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
  transition: all .1s;
}
.circle button:hover {
  background: #3071a9;
}
.circle button:focus {
  outline: none;
}
.circle ul {
  position: absolute;
  list-style: none;
  padding: 0;
  margin: 0;
  top: -20px;
  right: -20px;
  bottom: -20px;
  left: -20px;
}
.circle li {
  position: absolute;
  width: 0;
  height: 100%;
  margin: 0 50%;
  -webkit-transform: rotate(-360deg);
  transition: all 0.8s ease-in-out;
}
.circle li input {
  display: none;
}
.circle li input + label {
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 0;
  height: 0;
  line-height: 1px;
  margin-left: 0;
  background: #fff;
  border-radius: 50%;
  text-align: center;
  font-size: 1px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: none;
  transition: all 0.8s ease-in-out, color 0.1s, background 0.1s;
}
.circle li input + label:hover {
  background: #f3f3f3;
}
.circle.open li input + label {
  width: 80px;
  height: 80px;
  line-height: 80px;
  margin-left: -40px;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
}
.fab {
  font-size: 50px;
  line-height: 80px;
}
.fa-facebook { 
  color: #3a559f;
}
.fa-dribbble {
  color: #e74d89;
}
.fa-pinterest {
  color:#bd081c;
}
.fa-stumbleupon-circle {
  color: #eb4823;
}
.fa-reddit {
  color: #ff4500;
}
.fa-telegram {
  color: #2a9fd1;
}
.fa-google-plus {
  color: #d74c3e;
}
.fa-twitter {
  color: #53a8e6;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

/* Code By Webdevtrick ( https://webdevtrick.com ) */

@import url(https://fonts.googleapis.com/css?family=Oswald:400,300,700);

html, body {

height: 100%;

}

body {

margin: 0;

background: linear-gradient(#eee, #ccc);

overflow: hidden;

}

.circle {

position: absolute;

left: 50%;

top: 50%;

width: 140px;

height: 140px;

margin-top: -70px;

margin-left: -70px;

}

.circle, .circle button {

font-family: 'Oswald', sans-serif;

font-weight: 300;

}

.circle button {

position: relative;

width: 100%;

height: 100%;

padding: 10px;

background: #428bca;

border-radius: 50%;

border: 0;

color: white;

font-size: 20px;

cursor: pointer;

box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);

transition: all .1s;

}

.circle button:hover {

background: #3071a9;

}

.circle button:focus {

outline: none;

}

.circle ul {

position: absolute;

list-style: none;

padding: 0;

margin: 0;

top: -20px;

right: -20px;

bottom: -20px;

left: -20px;

}

.circle li {

position: absolute;

width: 0;

height: 100%;

margin: 0 50%;

-webkit-transform: rotate(-360deg);

transition: all 0.8s ease-in-out;

}

.circle li input {

display: none;

}

.circle li input + label {

position: absolute;

left: 50%;

bottom: 100%;

width: 0;

height: 0;

line-height: 1px;

margin-left: 0;

background: #fff;

border-radius: 50%;

text-align: center;

font-size: 1px;

overflow: hidden;

cursor: pointer;

box-shadow: none;

transition: all 0.8s ease-in-out, color 0.1s, background 0.1s;

}

.circle li input + label:hover {

background: #f3f3f3;

}

.circle.open li input + label {

width: 80px;

height: 80px;

line-height: 80px;

margin-left: -40px;

box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);

}

.fab {

font-size: 50px;

line-height: 80px;

}

.fa-facebook {

color: #3a559f;

}

.fa-dribbble {

color: #e74d89;

}

.fa-pinterest {

color:#bd081c;

}

.fa-stumbleupon-circle {

color: #eb4823;

}

.fa-reddit {

color: #ff4500;

}

.fa-telegram {

color: #2a9fd1;

}

.fa-google-plus {

color: #d74c3e;

}

.fa-twitter {

color: #53a8e6;

}

function.js

The final step, Create a JavaScript file named ‘function.js‘ and put the codes.

// Code By Webdevtrick ( https://webdevtrick.com )
var angleStart = -360;

// rotate animation
function rotate(li,d) {
    $({d:angleStart}).animate({d:d}, {
        step: function(now) {
            $(li)
               .css({ transform: 'rotate('+now+'deg)' })
               .find('label')
                  .css({ transform: 'rotate('+(-now)+'deg)' });
        }, duration: 0
    });
}

// show / hide
function toggleOptions(s) {
    $(s).toggleClass('open');
    var li = $(s).find('li');
    var deg = $(s).hasClass('half') ? 180/(li.length-1) : 360/li.length;
    for(var i=0; i<li.length; i++) {
        var d = $(s).hasClass('half') ? (i*deg)-90 : i*deg;
        $(s).hasClass('open') ? rotate(li[i],d) : rotate(li[i],angleStart);
    }
}

$('.circle button').click(function(e) {
    toggleOptions($(this).parent());
});

setTimeout(function() { toggleOptions('.circle'); }, 100);

// Code By Webdevtrick ( https://webdevtrick.com )

var angleStart = -360;

// rotate animation

function rotate(li,d) {

$({d:angleStart}).animate({d:d}, {

step: function(now) {

$(li)

.css({ transform: 'rotate('+now+'deg)' })

.find('label')

.css({ transform: 'rotate('+(-now)+'deg)' });

}, duration: 0

});

}

// show / hide

function toggleOptions(s) {

$(s).toggleClass('open');

var li = $(s).find('li');

var deg = $(s).hasClass('half') ? 180/(li.length-1) : 360/li.length;

for(var i=0; i<li.length; i++) {

var d = $(s).hasClass('half') ? (i*deg)-90 : i*deg;

$(s).hasClass('open') ? rotate(li[i],d) : rotate(li[i],angleStart);

}

$('.circle button').click(function(e) {

toggleOptions($(this).parent());

});

setTimeout(function() { toggleOptions('.circle'); }, 100);

That’s It. Now you have successfully created CSS Circular Sharing Widget With jQuery, Social Share Icon’s Circle Layout. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.

3 COMMENTS

Romit Raj Sahu October 26, 2019 At 5:16 pm

Hello Shaan! I needed your help. I was creating a ‘Newsletter Sign Up Form’ for my blog. I have the image of how it should should look, but, I am not able to create it. So, please can you help me in creating that sign up form? If yes, then thanks a lot. This is the image of how my form should look – http://bit.ly/31QTCiq

Reply
- Ankit October 27, 2019 At 2:40 pm
  
  it’s easy to create i can do that for free. mail me here.. ankitrawat805@gmail.com
  
  Reply
Ankit Rawat October 27, 2019 At 2:42 pm

This post is amazing i am surely gonna add this kind of animation into my project.

Reply

EVEN MORE NEWS

Free PHP, HTML, CSS, JavaScript/TypeScript editor – CodeLobster IDE

Unique Uses for Blockchain Technology

JavaScript Progress Clock | Day, Hour, Minute, Second, Progression

POPULAR CATEGORY

Preview Of Social Share Icon’s Circle Layout

CSS Circular Sharing Widget With jQuery Source Code

3 COMMENTS

LEAVE A REPLY Cancel reply

EVEN MORE NEWS

POPULAR CATEGORY