<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');
}
This Pen doesn't use any external CSS resources.