An HTML button is an interactive form control whose appearance and visual contents can be shaped with CSS while its meaningful purpose remains in the markup. section 6.2.2
Practical button styling relies on a few reusable principles:
- Target a form button directly when styling it alongside headings and input fields. section 4.3.2
- Keep meaningful button text in the HTML, then use CSS to alter its visual presentation. section 6.2.2
- Use borders, backgrounds, padding, margins, and the pointer cursor to establish a button’s visual treatment. section 4.3.2
A close button displayed as ×
Keep the word “close” in the button, move it outside the visible area with text-indent, hide overflow, and add an escaped multiplication sign through ::after. Position the pseudo-element inside the button, then refine its offsets in DevTools. section 6.2.2
Listing 4.10 Login form styles
.login-form h3 { #1
margin: 0; #1
font-size: 0.9em; #1
font-weight: bold; #1
text-align: end; #1
text-transform: uppercase; #1
} #1
.login-form input:not([type=checkbox]):not([type=radio]) { #2
display: block;
inline-size: 100%;
}
.login-form button { #3
margin-block-start: 1em; #3
border: 1px solid #cc6b5a; #3
background-color: white; #3
padding: 0.5em 1em; #3
cursor: pointer; #3
} #3
Inspect a complete login-form ruleset showing direct button targeting alongside input styling. section 4.3.2
Listing 6.6 Replacing the Close button with an ×
.modal-close {
position: absolute;
top: 0.3em;
right: 0.3em;
padding: 0.3em;
border: 0;
font-size: 2em;
height: 1em; #1
width: 1em; #1
text-indent: 10em; #2
overflow: hidden; #2
background-color: transparent;
}
.modal-close::after {
position: absolute;
line-height: 0.5;
top: 0.2em;
left: 0.1em;
text-indent: 0;
content: "\00D7"; #3
}
Inspect the close-button implementation, including sizing, hidden text, overflow, and the ::after content. section 6.2.2
