CSS Button


Buttons in CSS are used to act when they are clicked.Button elements are mentioned in between <button> and </button> tags.

Making stylish buttons using CSS

Step-1:
Here we are first designing a simple button the we will be adding styles to that.

Create a simple button

<!DOCTYPE html>
<html>
<head>
<title>
CSS Button
</title>
</head>
<body>
<button type="submit" value="submit">Click Me!</button>
</body>
</html>

Output:

Step-2:
Now styling same button using CSS.While styling we need to understand that there must be some space between button and it's content which we call padding.

Add style to simple button using CSS

Explaination:

<!DOCTYPE html>
<html>
<head>
<style>
button.btn{
width:100%;
background-color: blue;
border-radius: 8px;
color:white;
height:35px;
border:1px solid black;
}
</style>
<title>
CSS BUTTON
</title>
</head>
<body>
<button type="submit" value="submit">Click Me!</button>
</body>
</html>