EN
CSS - buttons with custom colors
0
points
In this article, we would like to show you how to create a button with custom color using CSS.
There are three main properties that you can use to color button elements:
color- to set the font color,background- to set the background color,border-color(borderproperty third argument isborder-color) - to set border color.
Practical example
In this example, we create three buttons with different colors using the properties mentioned above.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
button {
padding: 10px;
margin: 3px;
}
.button1 {
color: white;
background: red;
border: 2px solid #b30000;
}
.button2 {
color: black;
background: lightgray;
border: 2px solid #adadad;
}
.button3 {
color: white;
background: #2098d2;
border: 2px solid #15668e;
}
</style>
</head>
<body>
<button class="button1">Button1</button>
<button class="button2">Button2</button>
<button class="button3">Button3</button>
</body>
</html>