CSS - Share Button Icon

Code example for drawing a simple share button icon using HTML and CSS.

The HTML code sets the class name "share-btn-icon" for the <div> tag which will make up the share button icon element.

It specifies 3 <div> tags for the parts. In order: circle part, top bar, bottom bar.

<div class="share-btn-icon">
	<div></div><div></div><div></div>
</div>

The CSS custom properties:
"--w" sets the base size.
"--angle" allows rotating the element.
"--color" sets the base color.

The circle uses ::before and ::after pseudo elements to create 3 circles.
The bars use rotate() positioned from the left circle center.

/* Share Button Icon */
.share-btn-icon {
	--w: 300px; /* Base Size */
	--color: #ff69b4; /* Base Color */
	--angle: 0deg; /* Rotation */
	position: relative;
	width: var(--w);
	height: var(--w);
	transform: rotate(var(--angle));
}

/* Circle Part */
.share-btn-icon div:nth-child(1) {
	position: absolute;
	top: 50%;
	left: 15%;
	transform: translateY(-50%);
	width: 20%;
	height: 20%;
	background-color: var(--color);
	border-radius: 50%;
}

.share-btn-icon div:nth-child(1)::before {
	content: "";
	position: absolute;
	top: -125%;
	left: 250%;
	width: 100%;
	height: 100%;
	background-color: var(--color);
	border-radius: 50%;
}

.share-btn-icon div:nth-child(1)::after {
	content: "";
	position: absolute;
	top: 125%;
	left: 250%;
	width: 100%;
	height: 100%;
	background-color: var(--color);
	border-radius: 50%;
}

/* Bar Part A */
.share-btn-icon div:nth-child(2) {
	position: absolute;
	top: -10%;
	left: 22.5%;
	width: 5%;
	height: 60%;
	background-color: var(--color);
	transform-origin: center bottom;
	transform: rotate(63deg);
}

/* Bar Part B */
.share-btn-icon div:nth-child(3) {
	position: absolute;
	top: -10%;
	left: 22.5%;
	width: 5%;
	height: 60%;
	background-color: var(--color);
	transform-origin: center bottom;
	transform: rotate(117deg);
}