<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<style>
button {
padding: 1em .5em 1em .5em;
background: orange;
color: black;
border: none;
transition: 2s;
font-weight: 600;
}
button:hover {
color: white;
background: black;
cursor: pointer;
}
p {
font-size: 20px;
}
p #cursor {
color: orange;
font-weight: bold;
font-size: 40px;
line-height: 20px;
}
</style>
<button onclick="typeWriter()">Click Me To Write</button>
<br><br>
<p id="demo">
<span id="content"></span><span style="display:none" id='cursor'>|</span>
</p>
<script>
var i = 0;
var txt = 'Hi, I am written by a typewritter and you can do it very easily';
var speed = 50;
function typeWriter() {
if (i < txt.length) {
document.getElementById("content").innerHTML += txt.charAt(i);
document.getElementById('cursor').style.display = 'inline';
i++;
setTimeout(typeWriter, speed);
}
}
</script>
