Изменить название кнопки при нажатии на три

Дело такое, мне необходима ваша помощь. Хочу чтоб при нажатии на кнопку менялось название, то есть в итоге появились на кнопке три строки вместо одной. С возможностью применить эффекты к ним (цвет, шрифт).

<script>
    function klik() {
    document.getElementById('btn').value='Текст';
    }
</script>
<form>
    <input id="btn" type="button" value="Нажми меня" onClick="klik()">
</form>

Ответы (1 шт):

Автор решения: Igor

function klik() {
  document.getElementById('btn').innerHTML = `
  <span class="line1">One</span><br/>
  <span class="line2">Two</span><br/>
  <span class="line3">Three</span>
  `;
}
.line1 {
  color: red;
}

.line2 {
  color: blue;
}

.line3 {
  color: green;
}
<form>
  <button id="btn" type="button" onClick="klik()">Нажми меня</button>
</form>

→ Ссылка