A button is a clickable interface control that performs an action or links visitors to a destination. Clear button labels help visitors understand what will happen. section 3.5.1
Buttons commonly serve these purposes:
- Perform an action, such as submitting a contact form. section 3.5.1
- Link to a location described by the button label. section 3.5.1
- Save website changes, although WordPress may label the control Publish, Update, Save Menu, Save Changes, or Save depending on the screen. section 2.5
Showing additional information
A More information... button can reveal a hidden information block when clicked. HTML supplies the button and content, CSS initially hides the block, and JavaScript changes its display so the information appears without refreshing the page. Test the code by saving it as an .html file and opening it in a browser. section 5.10.2
<html>
<head>
<style>
#paintingInfo {
display: none;
}
</style>
</head>
<body>
<button id="moreInfoBtn">More information...</button>
<div id="paintingInfo">
<form>
<p>
This painting is 60 x 80 inches
and weighs 6 pounds. It is for sale at $4,000.
You can contact FbreahaXX@hotmail.com for
additional details and purchase instructions.
</p>
</form>
</div>
<script>
document.getElementById('moreInfoBtn')
.addEventListener('click', function() {
document.getElementById('paintingInfo')
.style.display = 'block';
});
</script>
</body>
</html>
Inspect a complete example containing a button, a hidden information block, styling, and a JavaScript click handler. section 5.10.2
