EN
CSS - style button (HTML element)
0
points
In this article, we would like to show you how to style button HTML elements using CSS.
Quick solution:
button {
padding: 4px 10px;
border: 1px solid red;
border-radius: 3px;
background: yellow;
color: red;
}
Practical example
In this section, we present advanced styling for button elements with :hover and :focus pseudo-classes.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
button.button, input.button {
padding: 4px 10px;
border: 1px solid #66b0ff;
border-radius: 3px;
background: #ffffff;
color: #007bff;
cursor: pointer;
}
button.button:hover, input.button:hover {
border-color: #66b0ff;
background-color: #e0efff;
}
button.button:focus, input.button:focus {
border-color: #80bdff;
box-shadow: 0 0 0 0.15rem rgba(0, 123, 255, 0.1);
}
</style>
</head>
<body>
<button class="button">Click me!</button>
<input class="button" type="button" value="Click me!" />
<input class="button" type="submit" value="Click me!" />
<input class="button" type="reset" value="Click me!" />
</body>
</html>