CSS Buttons - Ebhor.com

Buttons give a feel of automation to the websites.

A button pressed here can redirect you to another page, or may bring something new to current page.

CSS has a lot to style the buttons using its numerous properties.

The basic outlook of a button is a standard rectangular image with some instructive text written over it.

The color is mostly white for the image and black for the text. Let’s now take a look at different styling aspects of a button.

<style>
.btn {
	-moz-box-shadow:inset 0px 1px 0px 0px #f7c5c0;
	-webkit-box-shadow:inset 0px 1px 0px 0px #f7c5c0;
	box-shadow:inset 0px 1px 0px 0px #f7c5c0;
	background-color:#fc8d83;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #d83526;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:9px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #b23e35;
}
.btn:hover {
	background-color:#e4685d;
}
.btn:active {
	position:relative;
	top:1px;
}


</style>
</head>

<body>
<a href="#" class="btn">Click Me</a>
</body>

<style>

.btn {

-moz-box-shadow:inset 0px 1px 0px 0px #f7c5c0;

-webkit-box-shadow:inset 0px 1px 0px 0px #f7c5c0;

box-shadow:inset 0px 1px 0px 0px #f7c5c0;

background-color:#fc8d83;

-moz-border-radius:6px;

-webkit-border-radius:6px;

border-radius:6px;

border:1px solid #d83526;

display:inline-block;

cursor:pointer;

color:#ffffff;

font-family:Arial;

font-size:15px;

font-weight:bold;

padding:9px 24px;

text-decoration:none;

text-shadow:0px 1px 0px #b23e35;

}

.btn:hover {

background-color:#e4685d;

}

.btn:active {

position:relative;

top:1px;

}

</style>

</head>

<body>

<a href="#" class="btn">Click Me</a>

</body>

Run

Colors

The color of the button can be changes using the background-color property.

Sizes

The size of the button may depend on its dimensions or its text. You can change the font size of the text or the padding property of the button to alter the button size.

Rounded

With the help of the border-radius property, we can make the corners rounded for the buttons.

Colored Borders

The border property can be used to change the border color of the button. We generally choose the border a shade darker than the background-color of the containing element or the web-page in general.

Hover

Changing of background and border colors, or even the text can be done using the hovering feature for the buttons. You can also add transition for a better effect.

Shadow

The box-shadow property can add shadows to the button.

Disabled

To show a disabled button, we mostly increase the opacity of the button or change its background color to something between white and light-grey.

Width

Depending on the box-sizing property value, the width can be inclusive or exclusive of the padding, border and margins.

Grouping

The buttons can be grouped together by removing the margins and adding float:left to all of them. You can add borders to separate different buttons in the group. You can also use display:block if you want to group the buttons vertically.

Apart from these, we can also have buttons on images and buttons with animated features.