Hello readers, Today in this blog you’ll learn how to create the Simple Buttons (part-1) using HTML & CSS only.
In the video, you’ve seen "How to design the simple button (part-1) . As you know, this is a pure CSS program that means only HTML & CSS are used to create this button.
SOURCE CODE
To create this Simple Button (part-1) . First, you need to create one file for HTML code and CSS code is internally added in HTML file. After creating the file just paste the following codes in your file. Remember, you’ve to create a file with .html extension.
You can also download source code file from the given download button.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button-1</title>
<style>
body {
margin: 0;
padding: 0;
box-sizing: border-box;
display: grid;
place-content: center;
height: 100vh;
background-color: black;
}
.btn {
padding: 10px 20px;
font-size: 18px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
background-color: greenyellow;
color: black;
border: 2px solid black;
cursor: pointer;
transition: all 0.1s ease-in-out;
}
.btn:hover {
border: 3px solid greenyellow;
background-color: transparent;
color: greenyellow;
}
</style>
</head>
<body>
<button class="btn">Button</button>
</body>
</html>
Generating Download Link...