Social Media Buttons

The theme for week #18 of the Weekly Coding Challenge is:

We all know how important is Social Media nowadays for a business (be it either a blog or a product/service selling business) because of the amount of people using it. You can have the best product in the world, but if no one heard about it you are pretty much doomed as you won’t make any sales, or, on the other hand, you can have a “decent” product and by marketing it well (on Social Media) you’ll end up with a lot of sales, which means a lot of profit for your business.

With the above introduction in mind, let’s build a simple component that can be added on any website if you want to allow users to quickly follow you on other Social Media platforms.

Below you can see the result of what we are going to build in this tutorial:

https://codepen.io/FlorinPop17/pen/orJgaO

The HTML

As you have noticed, the Social Media container is a fixed positioned element, but before that let’s see the HTML structure.

We’ll have a .social-media-container which will hold all the .social-media items, and these have two inner tags: an icon and a text/link:

<ul class="social-media-container">
	<li class="social-media blog">
		<i class="fas fa-laptop-code"></i>
		<a href="https://florin-pop.com/blog" target="_blank">
			Check out my blog
		</a>
	</li>
	<li class="social-media twitter">
		<i class="fab fa-twitter"></i>
		<a href="https://twitter.com/florinpop1705" target="_blank">
			Follow me on Twitter
		</a>
	</li>
	<li class="social-media linkedin">
		<i class="fab fa-linkedin-in"></i>
		<a href="https://linkedin.com/in/florinpop17" target="_blank">
			Connect on Linkedin
		</a>
	</li>
	<li class="social-media facebook">
		<i class="fab fa-facebook-f"></i>
		<a href="https://facebook.com/florinpop17" target="_blank">
			Like my Facebook page
		</a>
	</li>
	<li class="social-media github">
		<i class="fab fa-github"></i>
		<a href="https://github.com/florinpop17" target="_blank">
			See projects on Github
		</a>
	</li>
</ul>

I used FontAwesome for icons.

The CSS

First, let’s start by styling the .social-media items with the inner elements (you’ll see why we start with these in a moment):

.social-media {
	align-items: center;
	display: flex;
	transition: transform 0.3s ease-in-out;
}

.social-media:hover {
	transform: translateX(calc(-100% + 60px));
}

.social-media i {
	color: #fff;
	font-size: 20px;
	padding: 15px;
	text-align: center;
	width: 60px;
}

.social-media a {
	color: #fff;
	padding: 0 10px;
}

Few things to note here:

The width of the i tag is very important because we do our calculations based on this amount (see .social-media transform value). Basically we want to keep the icon on the screen and for that we need to know the width of it when we calculate the positioning of the container
The .social-media item has a slight transition on it on hover and we are using calc to subtract the width of the icon (remember those 60px?) from the total width of this element (100%), and because we are moving from right to left we invert the signs (this is why we have -100% + 60px) and the result is that we’ll see the entire .social-media item on hover
The .social-media doesn’t have a background-color yet, this will be set individually for each item (see below)

Now that we know the width of the icon which we want to be visible, we can style the .social-media-container:

.social-media-container {
	list-style-type: none;
	padding: 0;
	position: fixed;
	top: 50%;
	left: calc(100% - 60px);
	transform: translateY(-50%);
	min-width: 250px;
}

As you can see, we are using the left property to push the element to 100% of the screen’s width and then we subtract those 60px (the icon width), the result: the icons are visible on the screen.

The top + transform - translateY combination if you don’t already know, it’s to make sure that the element is exactly in the middle of the screen - vertically / on the Y axis.

Great! 😃 The last thing to do is to color those individual .social-media items - this is why we added the different classes above in the HTML (.facebook, .twitter, etc)

.social-media.blog {
	background-color: #e17b77;
}

.social-media.facebook {
	background-color: #3b5998;
}

.social-media.twitter {
	background-color: #00aced;
}

.social-media.github {
	background-color: #333;
}

.social-media.linkedin {
	background-color: #007bb6;
}

You can take the brand colors from BrandColors.net - there are a ton of them.

Conclusion

Yet another simple component you now have in your tool belt!

I can’t wait to see what you, creative people, are going to create out of this! Make sure you share it with me! 😄

Happy Coding! 😇

Social Media Buttons