Buttons are very significant to any websites and its primary purpose is to attract users to click it. The question is how can it attract users and how to make them curious of what will happen if they click that button.
Simple answer is to make it clean, simple but stylish. Today, I will show you how to code modern CSS3 button only using HTML and CSS just like the preview image above.
In order to follow this tutorial, I assume that you have at least basic knowledge in HTML and CSS. If not yet,
you can access W3schools website to learn the basics from scratch. No more further ado, let’s start coding.
Setup the HTML Skeleton
In this code, I’ve used HTML5 skeleton structure. You can also find it here on W3shcools site.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How To Code Modern CSS3 Button?</title>
</head>
<body>
</body>
</html>
Add The Button
I prefer to create the button using “div” tag and enclose the “Read More” text to an anchor text link.
<div>
<a href="#">
Read More
</a>
</div>
This will be the updated code now.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How To Code Modern CSS3 Button?</title>
</head>
<body>
<div>
<a href="#">
Read More
</a>
</div>
</body>
</html>
The HTML skeleton is now completed. Next step is to add styles on this button to make it look attractive by creating CSS file. What is CSS? It stands for Cascading Style Sheet (CSS). It is a language that add styles to a HTML document. If you want to learn about the basics of CSS, I do prefer you visit W3schools site. CSS tutorials here are easy to follow and interesting to learn.
Create The CSS File
On this code below, I’ve created style.css file and is located on the root directory where my HTML file is located as well.
<link rel="stylesheet" type="text/css" href="style.css">
The CSS file code containing selectors, properties and values.
.readMoreBtn {
width: 150px;
font: bold 14px Arial, Helvetica, sans-serif;
color: #000;
text-align: center;
}
.readMoreBtn a {
color: #000;
text-decoration: none;
border: 1px solid #000;
padding: 15px 20px;
display: block;
/* start add border radius */
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
/* end add border radius */
/* start transition animation */
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
/* end transition animation */
}
.readMoreBtn a:hover {
color: #fff;
background-color: #000;
border: 1px solid #000;
}
Now that the CSS code is completed, it is ready to attach to the HTML document. HTML code will now look like this with the attached CSS file. Also, I’ve created “readMoreBtn” class to the button I’d setup earlier.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How To Code Modern CSS3 Button?</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="readMoreBtn">
<a href="#">
Read More
</a>
</div>
</body>
</html>
Check Out The Preview
If you find it difficult to follow this tutorial, feel free to contact me and I will be happy to assist you. I hope you find this tutorial informative, interesting and useful to your website projects.
Thank you.