This post is scheduled to be published in the future.
It should not be displayed by the theme.
One two three four five six seven eight.
A website made for testing
This post is scheduled to be published in the future.
It should not be displayed by the theme.
One two three four five six seven eight.
Resetting and restyling HTML buttons without a CSS framework...
button {
box-sizing: border-box;
margin: 0;
line-height: inherit;
color: inherit;
font-family: inherit;
font-size: inherit;
}
line-height may need attention if there are buttons with multiple lines of text. All other spacing can be controlled with the button height and the button padding.
NEXT. Prevent accidental selection of the button text on touch devices:
button {
user-select: none;
}
[....] (true for Firefox xx.xx, Google Chrome xx.xx and Safari 14.0 as of November 2020). [....]
button {
display: inline-flex;
}
Vertical and horizontal alignment within the flex box:
button {
align-items: center;
justify-content: center;
}
Set a border. The border color can later be changed for the different states of solid buttons or it can be set to currentColor
for outlined buttons.
button {
border: 2px solid transparent;
}
Set minimum size. WCAG 2.1 recommendation. Google recommendation.
button {
min-width: 44px;
min-height: 44px;
}
button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
button {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0;
min-width: 44px;
min-height: 44px;
border: 2px solid transparent;
background-color: #080;
padding: 0.25em 1.25em;
line-height: inherit;
color: #fff;
font-family: inherit;
font-size: inherit;
user-select: none;
}
button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
button:hover {
background-color: #060;
}
button:active {
background-color: #090;
}
button:focus {
}
:active
does not seem to happen when hitting Enter.flex
or inline-flex
on buttons.text-align: center
and vertical-align: center
.cursor: pointer
This is a list of WordPress plugins that I use often and that I have grown to trust. The list is a work in progress.
Hello!
This is a test post. One two three four five six seven eight.
It belongs in the Miscellaneous category.