Pure CSS Hoverable Sidenav Buttons

byCodingFlicks -October 27, 2020

0

Today I am sharing another simple project based on creating Hoverable Sidenav Buttons using only HTML and CSS. We often see some website add their social-media profile in the form of a site nav that sticks to the web page's left or right side. I have made this based on this idea. This snippet is made using basic HTML and CSS coding, and the coding is quite simple and straightforward. I have shared a couple of CSS animation based snippet before. Check those if you are interested. Without further explanation, I am providing you the code to play around with the code by yourself.

HTML

<!DOCTYPE html>
<!--Code by codingflicks.com-->
<html>
<head>
	<meta content="width=device-width, initial-scale=1" name="viewport">
	<title>Pure CSS Hoverable Sidenav Buttons</title>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet">
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<div class="leftNav">
		<a href="#" id="social-1"><i class="fa fa-behance"></i></a> <a href="#" id="social-2"><i class="fa fa-youtube"></i></a> <a href="#" id="social-3"><i class="fa fa-vine"></i></a> <a href="#" id="social-4"><i class="fa fa-skype"></i></a>
	</div>
	<div class="banner">
		<h2>Banner Text</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi amet soluta assumenda molestiae quisquam accusantium nihil alias fugit debitis. Minima, provident, eveniet. Corporis quam doloremque, ratione doloribus error necessitatibus id suscipit. Ab officiis deserunt consequuntur adipisci animi natus, velit voluptatem itaque ullam molestiae quis et sit alias qui modi nam provident perspiciatis consequatur placeat. Laborum, distinctio laudantium dolorum maiores fugit. Ab beatae quod laborum consequatur harum a possimus quidem consequuntur odit corrupti repellat incidunt aliquid, fugit consectetur ipsam officia voluptas fuga tenetur nam laudantium cupiditate deleniti? Numquam obcaecati et, dolore deserunt ipsum at totam architecto, earum, ut accusamus repellendus facere aspernatur voluptates nisi molestias, reprehenderit sed ratione! Autem neque reprehenderit perferendis maiores voluptates, minus ratione inventore voluptatibus sit enim, in sequi, modi pariatur eaque! Nesciunt perferendis quae porro id optio debitis, autem ipsa culpa et temporibus repudiandae. Officiis voluptatum explicabo excepturi eaque, voluptas ad et porro velit possimus consequatur amet</p>
	</div>
</body>
</html>

CSS

body {
	overflow-x: hidden;
}
.leftNav a {
	position: absolute;
	right: -80px;
	transition: 0.3s;
	padding: 15px;
	width: 100px;
	text-decoration: none;
	font-size: 20px;
	color: white;
	margin-top: 10%;
}
.leftNav a:hover {
	right: 0;
}
#social-1 {
	top: 20px;
	background-color: #131418;
}
#social-2 {
	top: 80px;
	background-color: #cd201f;
}
#social-3 {
	top: 140px;
	background-color: #00b489;
}
#social-4 {
	top: 200px;
	background-color: #00AFF0;
}
.banner {
	margin-left: 80px;
}
.banner h2 {
	font-size: 80px;
	font-family: poppins;
	text-transform: uppercase;
}
.banner p {
	padding: 0 15% 0 0;
	font-family: poppins;
	line-height: 1.9;
}

I hope you liked it. Thanks for visiting.

Please do not enter any spam link in the comment box.