CSS Properties: CSS Buttons and CSS Float
CSS Buttons
HTML uses the button tag to create a button, but we can create new button styles using certain CSS Buttons properties. By using buttons, we can interact with users and process events.
Buttons are one of the widely used elements of web pages, and they are generally used during form submission, to view, or to get some information.
Basic Ways Of Styling a Button
Various properties are available to style the button element. They are;
- Background Color
As you know, this property is used to set the button element's background color.
Example
<!DOCTYPE html>
<html>
<head>
<title>
button background Color example
</title>
<style>
body{
text-align: center;
}
button {
color:lightblue;
font-size: 30px;
}
.b1 {
background-color: yellow;
}
.b2 {
background-color: green;
}
.b3 {
background-color: Orange;
}
</style>
</head>
<body>
<h1>The background-color property Example.</h1>
<button class="b1">Yellow color button</button>
<button class="b2">Green color button</button>
<button class="b3">Orange color button</button>
</body>
</html>
2. Border
This property is to set the border of the button. It is a shorthand property for border width, color, and style. \
Example
<!DOCTYPE html>
<html>
<head>
<title>
button background Color example
</title>
<style>
body{
text-align: center;
}
button {
color:lightblue;
font-size: 30px;
}
.b1 {
background-color: yellow;
border:none;
}
.b2 {
background-color: green;
border:5px brown solid;
}
.b3 {
background-color: orange;
color:black;
border:5px white groove;
}
.b4{
background-color:purple;
border: 5px white dashed;
}
.b5{
background-color: blue;
border: 5px black dotted;
}
.b6{
background-color: pink;
border:5px black double;
}
</style>
</head>
<body>
<h1>The border property example</h1>
<button class="b1">none</button>
<button class="b2">solid</button>
<button class="b3">groove</button>
<button class="b4">dashed</button>
<button class="b5">dotted</button>
<button class="b6">double</button>
</body>
</html>
3. Border Radius
This round the corners of the button, setting its border.
Example
<!DOCTYPE html>
<html>
<head>
<title>
button background Color example
</title>
<style>
body{
text-align: center;
}
button {
color:lightblue;
font-size: 30px;
}
.b1 {
background-color: yellow;
border:none;
}
.b2 {
background-color: green;
border:5px brown solid;
border-radius: 7px;
}
.b3 {
background-color: orange;
color:black;
border:5px white groove;
border-radius: 10px;
}
.b4{
background-color:purple;
border: 5px white dashed;
border-radius: 20px;
}
.b5{
background-color: blue;
border: 5px black dotted;
border-radius: 30px;
}
.b6{
background-color: pink;
border:5px black double;
border-radius: 25px;
}
</style>
</head>
<body>
<h1>The border-radius property example</h1>
<h2>Here is the border name and the border-radius</h2>
<button class="b1">none</button>
<button class="b2">solid 7px</button>
<button class="b3">groove 10px</button>
<button class="b4">dashed 20px</button>
<button class="b5">dotted 30px</button>
<button class="b6">double 25px</button>
</body>
</html>
4. Box Shadow
This is used to create the shadow of the button box. It can also create a shadow during the hover on the button.
Example
<!DOCTYPE html>
<html>
<head>
<title>
button background Color example
</title>
<style>
body{
text-align: center;
}
button {
color:lightblue;
font-size: 30px;
}
.b1{
background-color: lightblue;
border:5px red double;
border-radius: 25px;
color:black;
box-shadow : 0 8px 16px 0 black,
0 5px 10px 0 rgba;
}
.b2{
background-color: lightblue;
border:5px red dotted;
color:black;
border-radius: 25px;
}
.b2:hover{
box-shadow : 0 8px 16px 0 black,
0 5px 10px 0 rgba;
}
</style>
</head>
<body>
<button class="b1">button shadow</button>
<button class="b2"> Hover on box-shadow</button>
</body>
</html>
5. Padding
This sets the button padding. Here is a better example to explain.
Example
<!DOCTYPE html>
<html>
<head>
<title>
button background Color example
</title>
<style>
body{
text-align: center;
}
button {
color:lightblue;
font-size: 30px;
}
.b1 {
background-color: yellow;
border:none;
padding: 16px;
}
.b2 {
background-color: green;
border:5px brown solid;
padding:15px 30px 25px 40px;
}
.b3 {
background-color: orange;
color:black;
border:5px white groove;
padding-top:30px;
}
.b4{
background-color:purple;
border: 5px white dashed;
padding-bottom:40px;
}
.b5{
background-color: blue;
border: 5px black dotted;
padding-left: 40px;
}
.b6{
background-color: pink;
border:5px black double;
padding-right: 40px;;
}
</style>
</head>
<body>
<h1>The padding property example</h1>
<button class="b1">none</button>
<button class="b2">solid</button>
<button class="b3">groove</button>
<button class="b4">dashed</button>
<button class="b5">dotted</button>
<button class="b6">double</button>
</body>
</html>
CSS Float
This is a positioning property used to move an element to the left or right so other elements can surround it. It is basically used with images and layouts.
How It Works
Elements are only floated horizontally. This means it is only possible to float elements left or right.
- There is no restriction on how far a floated element can be moved.
- It will be surrounded by elements after the floating element.
- A floating element will not affect elements before it.
- In the same way, the text flows around the image to the left when it is floated to the right, and vice versa.
CSS FLOAT PROPERTIES
| Property | Description | Values |
| clear | By using the clear property, floating elements can avoid other elements. | left, right, both, none, inherit |
| float | It decides whether the box should float or not. | Left, right, none, inherit |
CSS Float Property Values
| Value | Description |
| none | This is a default value that shows the element is not floated and will be shown just where it appears in the text. |
| Left | This floats the element to the left. |
| Right | This floats the element to the left. |
| Initial | This sets the property to its original value. |
| Inherit | This inherits this property from its original element. |
CSS Float Property Example
This example helps us better understand CSS property float.
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: right;
}
</style>
</head>
<body>
<p>The following paragraph includes an image with style
<b>float:right</b>. The image will then float to the right in the paragraph.</p>
<img src="Hello-people.jpg" alt="Hello Techstack Friends"/>
Insert text. Insert text.
Insert text. Insert text.
Insert text. Insert text.
Insert text. Insert text.
Insert text. Insert text.
Insert text. Insert text.
Insert text. Insert text.
Insert text. Insert text.
Insert text. Insert text.
Insert text. Insert text.
Insert text. Insert text.
Insert text. Insert text.
Insert text. Insert text.
</p>
</body>
</html>
