"javscript typewritter"
Bootstrap 4.1.1 Snippet by Qamarabbas

<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>

Related: See More

Questions / Comments: