Share toggles

Developer
Rosh Jutherford
Size
3,574 Kb
Views
28,336
  1. Share toggles Previews
  2. Share toggles HTML Codes
  3. Share toggles CSS Codes
  4. Share toggles JS Codes

How do I make an share toggles?

Designed by Andrew Cornett on Dribbble.. What is a share toggles? How do you make a share toggles? This script and codes were developed by Rosh Jutherford on 04 September 2022, Sunday.

Share toggles Previews
IQ Test

Share toggles - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Share toggles</title> <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<meta name="viewport" content="width=device-width,initial-scale=1.0, max-scale=1.0, user-scalable=no"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ *,
*:before,
*:after { box-sizing: border-box;
}
html, body { width: 100%; height: 100%; -webkit-font-smoothing: antialiased;
}
html { background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/25381/blur2.png") no-repeat center center; background-size: cover;
}
nav { width: 15.5rem; height: 5.0rem; margin: 100px auto;
}
nav ul { width: 100%; height: 100%;
}
nav ul:before, nav ul:after { content: ''; display: table;
}
nav ul:after { clear: both;
}
nav ul li { text-align: center; display: block; width: 33.33%; height: 100%; float: left; line-height: 5.5rem; color: rgba(255, 255, 255, 0.3); border-width: 2px 0; border-style: solid; border-color: rgba(255, 255, 255, 0.3); cursor: pointer; transition: color 0.25s ease, border 0.25s ease;
}
nav ul li:first-of-type { border-radius: 50% 0 0 50%; border-left: 2px solid rgba(255, 255, 255, 0.3);
}
nav ul li:last-of-type { border-radius: 0 50% 50% 0; border-right: 2px solid rgba(255, 255, 255, 0.3);
}
nav ul li.selected { color: #8a4fe8; border-color: #8a4fe8;
}
nav ul li i { display: block; width: 100%; height: 100%; font-size: 2.4rem;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <nav role='navigation'> <ul> <li class="selected"><i class="fa fa-twitter"></i></li> <li><i class="fa fa-facebook-square"></i></li> <li><i class="fa fa-instagram"></i></li> </ul>
</nav> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Share toggles - Script Codes CSS Codes

*,
*:before,
*:after { box-sizing: border-box;
}
html, body { width: 100%; height: 100%; -webkit-font-smoothing: antialiased;
}
html { background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/25381/blur2.png") no-repeat center center; background-size: cover;
}
nav { width: 15.5rem; height: 5.0rem; margin: 100px auto;
}
nav ul { width: 100%; height: 100%;
}
nav ul:before, nav ul:after { content: ''; display: table;
}
nav ul:after { clear: both;
}
nav ul li { text-align: center; display: block; width: 33.33%; height: 100%; float: left; line-height: 5.5rem; color: rgba(255, 255, 255, 0.3); border-width: 2px 0; border-style: solid; border-color: rgba(255, 255, 255, 0.3); cursor: pointer; transition: color 0.25s ease, border 0.25s ease;
}
nav ul li:first-of-type { border-radius: 50% 0 0 50%; border-left: 2px solid rgba(255, 255, 255, 0.3);
}
nav ul li:last-of-type { border-radius: 0 50% 50% 0; border-right: 2px solid rgba(255, 255, 255, 0.3);
}
nav ul li.selected { color: #8a4fe8; border-color: #8a4fe8;
}
nav ul li i { display: block; width: 100%; height: 100%; font-size: 2.4rem;
}

Share toggles - Script Codes JS Codes

$('ul li').on('click',function() { var $this = $(this); $('li').removeClass('selected'); $this.addClass('selected');
});
Share toggles - Script Codes
Share toggles - Script Codes
Home Page Home
Developer Rosh Jutherford
Username the_ruther4d
Uploaded September 04, 2022
Rating 4
Size 3,574 Kb
Views 28,336
Do you need developer help for Share toggles?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Rosh Jutherford (the_ruther4d) Script Codes
Name
Hover effect demo
IOS7 Icon
Game-Style Header
Parallax Canvas Gallery
Flat Range Sliders
Pre-loader 1 by Chris Hall
RvV 2
Beautiful Login Form
Download Button
A Pen by Rosh Jutherford
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!