<div id="app">
<label for="textarea">What is your favorite kind of taco?</label>
<textarea id="textarea"></textarea>
<br>
<button class="button">Let us know!</button>
</div>body {
font-family: 'Bitter', serif;
}
#app {
text-align: center;
padding: 70px;
max-width: 360px;
font-size: 16px;
margin: 0 auto;
display: table;
line-height: 2em;
}
label {
padding-right: 10px;
font-size: 18px;
font-weight: bold;
}
button {
border: none;
color: white;
padding: 0.5em 1em;
border-radius: 3px;
background: orangered;
}
textarea {
margin-top: 10px;
}
$(function() {
var button = $('.button');
var textarea = $('#textarea');
button.hide();
textarea.keyup(function() {
if (textarea.val().length > 0) {
button.show();
} else {
button.hide();
}
})
});
External CSS
This Pen doesn't use any external CSS resources.