<article>
  <h1>Select over the text below</h1> 
  <p>Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript. CSS is designed to enable the separation of presentation and content, including layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics. </p>
</article>
<template><span id="control"></span></template>
#control {
	background-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width='40px' height='40px'><foreignObject width='40px' height='40px'><div xmlns='http://www.w3.org/1999/xhtml' style='width:40px;height:40px;line-height:40px;text-align:center;color:transparent;text-shadow: 0 0 yellow, 2px 4px black, -1px -1px black;font-size:35px;'>💬</div></foreignObject></svg>");
	cursor: pointer;
	position: absolute;
	width: 40px; height: 40px;
}
#control::before{
	background-color: black;
	color: white;
	content: " tweet this! ";
	display: block;
	font-weight: bold;
	margin-left: 37px; margin-top: 6px;
	padding: 2px;
	width: max-content; height: 20px;
}
article{
	background: white;
	border-radius: 4px;
	font-size: 13pt;
	margin: auto;
	padding: 30px;
	position: absolute; 
	text-align: justify;
	top: 0;bottom: 0;left: 0;right: 0;
	width: 300px; height: 400px;
}
h1{
	font-size: 17pt;
	text-align: center;
	text-decoration-line: underline;
	text-decoration-color: yellow;
}
body{
	background-image: linear-gradient(45deg, beige, azure);
	font-family: 'crimson text'; 
}






var control = document.importNode(document.querySelector('template').content, true).childNodes[0];
control.addEventListener('pointerdown', oncontroldown, true);
document.querySelector('p').onpointerup = ()=>{
	let selection = document.getSelection(), text = selection.toString();
	if (text !== "") {
		let rect = selection.getRangeAt(0).getBoundingClientRect();
		control.style.top = `calc(${rect.top}px - 48px)`;
		control.style.left = `calc(${rect.left}px + calc(${rect.width}px / 2) - 40px)`;
		control['text']= text; 
		document.body.appendChild(control);
	}
}
function oncontroldown(event) {
	window.open(`https://twitter.com/intent/tweet?text=${this.text}`);
	this.remove();
	document.getSelection().removeAllRanges();
	event.stopPropagation();
}
document.onpointerdown = ()=>{	
	let control = document.querySelector('#control');
	if (control !== null) {control.remove();document.getSelection().removeAllRanges();}
}

External CSS

  1. https://fonts.googleapis.com/css?family=Crimson+Text

External JavaScript

This Pen doesn't use any external JavaScript resources.