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.
In this example, we create three buttons with different colors using the properties mentioned above.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
button {7
padding: 10px;8
margin: 3px;9
}10
11
.button1 {12
color: white;13
background: red;14
border: 2px solid #b30000;15
}16
17
.button2 {18
color: black;19
background: lightgray;20
border: 2px solid #adadad;21
}22
23
.button3 {24
color: white;25
background: #2098d2;26
border: 2px solid #15668e;27
}28
29
</style>30
</head>31
<body>32
<button class="button1">Button1</button>33
<button class="button2">Button2</button>34
<button class="button3">Button3</button>35
</body>36
</html>