<input type="text" id="copyText" value="cooopy">
<button id="copyBtn"><i class="ph-copy"></i> Copy</button>
* {
	margin: 0;
	padding: 0;
	font-size: 1.5rem;
	box-sizing: border-box;
}

body {
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}

button, input {
	padding: 20px;
	border-radius: 20px;
	outline: none;
}

input {
	cursor: default;
	border: 5px solid #2196F3;	
	transition: all 0.3s ease-in-out;
}

input:focus {
	border-color: #0078D7;	
}

button {
	cursor: pointer;
	color: #fff;
	background: #0078D7;
	border: none;
	margin-left: 10px;
	transition: all 0.3s ease-in-out;
}
button:hover {
	background: #2196F3;
}
const copyBtn = document.getElementById('copyBtn')
const copyText = document.getElementById('copyText')

copyBtn.onclick = () => {
	copyText.select();
	document.execCommand('copy');
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/phosphor-icons