Responsive Social Footer With Counts

Hello, this post explains in detail how to make responsive social footer, which can often be used in the footer section of web pages.

responsive social footer

We will use the box-sizing feature of CSS and the calc() function for this. If we mention these features briefly;

Under normal conditions, padding and border values are added in addition to the box width and height values. In other words, border and padding values will be added in addition to the width of a box that you define your width as 200px.

 

 

The Box sizing feature includes a border-box value that adds padding and border values to the total width in width and height calculations. We will take advantage of the border-box value here.

The CSS calc() function allows us to do some arithmetic operations (addition, subtraction, multiplication, division).

Responsive Social Footer HTML Code

Now let’s first add 1 link to the main container box (div) and 3 links (a). Let’s add the “social-button” class and the names of the social media applications we want to add to the sub-boxes we have added.

<div>
<a href="https://twitter.com" class="social-button twitter"></a>
<a href="https://facebook.com" class="social-button facebook"></a>
<a href="https://plus.google.com" class="social-button googleplus"></a>
</div>

After adding social media buttons, I will add social media name and follower numbers in each button.

<div>
/* Twitter button */
<a href="https://twitter.com" class="social-button twitter">
<span class="social-description">
 <span class="social-name">Twitter</span>
 <br>
 <span class="social-count">5,564</span>
</span>
</a>

/* Facebook button */
<a href="https://facebook.com" class="social-button facebook">
<span class="social-description">
 <span class="social-name">Facebook</span>
 <br>
 <span class="social-count">35,061</span>
</span>
</a>

/* Google Plus button */ 
<a href="https://plus.google.com" class="social-button googleplus"><span class="social-description">
 <span class="social-name">Facebook</span>
 <br>
 <span class="social-count">45,061</span>
</span>
</a>

</div>

Finally, we can also add social media icons to our HTML code. For that I will use font-awesome. To add a Font-Awesome page, add the following code between the <head> </head> tags:

<script src="https://use.fontawesome.com/30e0c42208.js"></script>

After adding the social media icons, the final version of the HTML code looks like this:

<div>
/* Twitter button */
<a href="https://twitter.com" class="social-button twitter">
<i class="fa fa-twitter"></i>
<span class="social-description">
 <span class="social-name">Twitter</span>
 <br>
 <span class="social-count">5,564</span>
</span>
</a>

/* Facebook button */
<a href="https://facebook.com" class="social-button facebook">
<i class="fa fa-facebook"></i>
<span class="social-description">
 <span class="social-name">Facebook</span>
 <br>
 <span class="social-count">35,061</span>
</span>
</a>

/* Google Plus button */ 
<a href="https://plus.google.com" class="social-button googleplus">
<i class="fa fa-google-plus"></i>
<span class="social-description">
 <span class="social-name">Google+</span>
 <br>
 <span class="social-count">45,061</span>
</span>
</a>

</div>

Responsive Social Footer CSS Code

After we finished our work with HTML, it’s time to create the CSS code. At the beginning of our article, we mentioned that we would use the CSS calc() function and box-sizing property.

First we will include the border-box value of the box-sizing feature and the padding and border values of the social media button in the total width. Then, with the calc() function, divide the page width by this number if you want to show how many buttons on the page:

.social-button {
 box-sizing: border-box; 
 width: calc(100% / 3); /* Number of buttons to be displayed. */
}

As you can see here, we have 100% page width. You can also specify any width value you want here. For example, 300px.

Next, I’ll add the other CSS properties of the button to the .social-button class. Let’s also write the following values for class :hover property:

.social-button {
 box-sizing: border-box;
 width: calc(100% / 3);
 display: inline-block;
 height: 63px;
 margin: 0;
 padding: 0;
 text-align: center;
 float: left;
 color: white;
 padding-top: 10px;
 padding-bottom: 10px;
}

.social-button:hover {
 color: white;
 text-decoration: none;
}

Now let’s add the following codes to color the buttons:

.googleplus { 
 background-color: #d44837;
 } 

.twitter {
 background-color: #55acef; 
}

.facebook {
 background-color: #3b5999; 
}

Finally, let’s finish our work by adding the following codes.

.social-description {
  display: inline-block;
  margin-left: 10px;
}

.social-name {
  font-weight: bold;
  font-size: 13px;
}
.social-count {
  display: inline-block;
  margin-top: 2px;
  background-color: rgba(0,0,0,.3);
  padding: 2px 4px;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  font-size: 12px;
}
.social-button i {
  font-size: 40px;
}

Result

If at the end of the work you’ve got an image like this, you’ve followed the steps correctly.

See the Pen Responsive Social Footer With Counts by Ayhan Selek

Download