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:
xxxxxxxxxx1
button {2
padding: 4px 10px;3
border: 1px solid red;4
border-radius: 3px;5
background: yellow;6
color: red;7
}
In this section, we present advanced styling for button elements with :hover and :focus pseudo-classes.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
button.button, input.button {7
padding: 4px 10px;8
border: 1px solid #66b0ff;9
border-radius: 3px;10
background: #ffffff;11
color: #007bff;12
cursor: pointer;13
}14
15
button.button:hover, input.button:hover {16
border-color: #66b0ff;17
background-color: #e0efff;18
}19
20
button.button:focus, input.button:focus {21
border-color: #80bdff;22
box-shadow: 0 0 0 0.15rem rgba(0, 123, 255, 0.1);23
}24
25
</style>26
</head>27
<body>28
<button class="button">Click me!</button>29
<input class="button" type="button" value="Click me!" />30
<input class="button" type="submit" value="Click me!" />31
<input class="button" type="reset" value="Click me!" />32
</body>33
</html>
