[Support request] Can we implement this CSS and HTML

[Haneet]

Hello, I want to add a Social Media Share button on my site and found one amazing design – https://codepen.io/premitheme/pen/VEyPyO

Tried the same code on my website, but the results are not same as expected, check the screenshot here – https://ibb.co/HzDxv1P

HTML Code –

<div class="container">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
	<div class="tip">Share</div>
	<div class="share-window">
		<div class="share-bar">
			<div class="trigger"><a href="#"><i class="fab fa-facebook-f"></i></a></div>
			<div class="trigger"><a href="#"><i class="fab fa-twitter"></i></a></div>
			<div class="trigger"><a href="#"><i class="fab fa-pinterest-p"></i></a></div>
			<div class="trigger"><a href="#"><i class="fab fa-linkedin-in"></i></a></div>
			<div class="trigger"><a href="#"><i class="fab fa-whatsapp"></i></a></div>
			<div class="trigger"><a href="#"><i class="fas fa-paper-plane"></i></a></div>
		</div>
	</div>
	<div class="share">
		<div class="trigger share-btn"><a href="#"><i class="fas fa-plus"></i> Share</a></div>
	</div>
	<div class="like">
		<div class="trigger like-btn"><a href="#"><i class="fas fa-heart"></i> Like</a></div>
	</div>
</div>
<div class="footer-note">
	<p>A pen by Ahmed Ashraf <a href="https://twitter.com/premitheme" target="_blank">@premitheme</a> with <i class="fas fa-heart"></i></p>
	<p>My WordPress themes on <a href="https://1.envato.market/EPK" target="_blank">ThemeForest</a>.</p>
</div>

CSS Code is here –

$width: 42px;
$height: 40px;

body {
	font-family: 'Nunito Sans', sans-serif;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100vh;
	color: rgba(#2c2c2c,.5);

	*, *:after, *:before {
		box-sizing: border-box;
	}
}

.footer-note {
	text-align: center;
	font-size: 12px;
	color: #999;
	
	p {
		line-height: 2em;
	}
  
	a {
		color: #999;
		text-decoration: none;
		border-bottom: 1px solid #ccc;
		transition: all 0.2s ease;
    
		&:hover {
			color: #444;
			border-color: #aaa;
		}
	}
  
	i {
		margin: 0 0 0 2px;
		color: #f95a54;
	}
}

.container {
	display: flex;
	justify-content: flex-end;
	position: relative;
	float: right;
	margin: 0 0 80px;
}

.tip {
	position: absolute;
	top: 50%;
	right: calc(100% + 10px);
	transform: translateY(-50%);	
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: .1em;

	display: flex;
	align-items: center;
	
	&:after {
		content: "";
		width: 30px;
		height: 1px;
		background: rgba(#2c2c2c,.3);
		margin: 0 0 0 8px;
	}
	
	@media only screen and (max-width: 600px) {
		display: none;
	}
}

.trigger {
	height: $height;
	line-height: $height;
	font-size: 14px;
	text-align: center;
	cursor: pointer;
	transition: color .2s, border .2s;

	a {
		color: currentColor;
		text-decoration: none;
		transform: skew(10deg);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	i {
		font-size: 14px;
		line-height: $height;
	}

	&:hover {
		color: #2c2c2c;
		border-color: #2c2c2c !important;
	}
	
	&.share-btn {
		i {
			margin: 0 5px 0 0;
		}
	}
}

.like, .share {
	transform: skew(-10deg);
	margin: 0 0 0 10px;
	
	.trigger {
		width: ($width * 2) - 2px;
		border: 1px solid rgba(#2c2c2c,.3);
	}
	
	i {
		margin: 0 5px 0 0;
	}
}

.share {
	@media only screen and (min-width: 601px) {
		display: none;
	}
}

.share-window {
	transform: skew(-10deg);
	overflow: hidden;
	
	@media only screen and (max-width: 600px) {
		display: none;
	}
}

.share-bar {
	position: relative;
	width: ($width * 2) - 2px;
	height: $height;
	transition: width .4s ease .2s;
	
	&:before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-width: 1px;
		border-style: solid;
		border-color: rgba(#2c2c2c,.3) rgba(#2c2c2c,.3) rgba(#2c2c2c,.3) transparent;
	}
	
	&:hover {
		width: ($width * 6) - 5px;
		transition: width .4s ease;
		
		.trigger {
			&:nth-child(3) {
				left: ($width * 2) - 2px;
				transition: left .45s ease .06s, color .2s, border .2s;
			}

			&:nth-child(4) {
				left: ($width * 3) - 3px;
				transition: left .45s ease .12s, color .2s, border .2s;
			}

			&:nth-child(5) {
				left: ($width * 4) - 4px;
				transition: left .45s ease .18s, color .2s, border .2s;
			}

			&:nth-child(6) {
				left: ($width * 5) - 5px;
				transition: left .45s ease .24s, color .2s, border .2s;
			}
		}
	}
	
	.trigger {
		position: absolute;
		top: 0;
		width: $width;
		border-width: 1px;
		border-style: solid;
		border-color: transparent transparent transparent rgba(#2c2c2c,.3);
		transition: left 0s ease .45s, color .2s, border .2s;

		&:nth-child(1) {
			left: 0;
		}

		&:nth-child(2) {
			left: $width - 1px;
		}

		&:nth-child(3) {
			left: ($width * 2) - 2px + 20px;
		}

		&:nth-child(4) {
			left: ($width * 3) - 3px + 20px;
		}

		&:nth-child(5) {
			left: ($width * 4) - 4px + 20px;
		}

		&:nth-child(6) {
			left: ($width * 5) - 5px + 20px;
		}
	}
}

Can you tell me how to implement this.

[Leo]

Hi there,

Unfortunately, we cannot help with implementing a custom/random solution from CodePen:
https://generatepress.com/what-support-includes/

The HTML and CSS would usually need to be tweaked in order to implement it in any themes.

You can try contacting a developer using a service like Codeable if this is a required feature for your site.

Thanks for your understanding.

[Author]

Posts