HTML CSS Exercise: CSS Button

Last update on March 04 2024 06:50:50 (UTC/GMT +8 hours)

Solution:

HTML Code :

<!doctype html>
<html>
<head>
<title>HTML CSS Exercise - create button with CSS3</title>
<style>/* Begins CSS styling */
/* CSS comments: Define the style for the button */
button {
/* CSS comments: Set the width, padding, background color, border color, text color, and border radius for the button */
width: 200px;
padding:8px;
background-color: #428bca;
border-color: #357ebd;
color: #fff;
-moz-border-radius: 10px; /* CSS comments: Define border radius for Mozilla Firefox */
-webkit-border-radius: 10px; /* CSS comments: Define border radius for WebKit browsers */
border-radius: 10px; /* CSS comments: Define border radius for future proofing */
-khtml-border-radius: 10px; /* CSS comments: Define border radius for old Konqueror browsers */
text-align: center;
vertical-align: middle;
border: 1px solid transparent; /* CSS comments: Define border as transparent */
font-weight: 900;
font-size:125%
}
</style>
<title>Untitled Document</title>
</head>
<body>
<button>Subscribe Now</button>
</body>
</html>

Explanation:

The HTML file starts with the standard document structure.
Inside the <head> section, a title is defined for the HTML page.
Within the <style> tag, CSS rules are defined for styling the button element.
The button element is targeted, and various CSS properties are applied to it to define its appearance.
Width, padding, background color, border color, text color, and font weight are set to create the visual style of the button.
Border radius properties are used to give rounded corners to the button.
Different vendor prefixes (-moz-, -webkit-, -khtml-) are used to ensure compatibility with various browsers.
Text alignment and vertical alignment properties are set for proper positioning of the button text.
A transparent border is defined for the button.
Finally, the button element is used in the HTML body with the text "Subscribe Now" inside it.

Live Demo :

Supported browser


Yes	Yes	Yes	Yes	Yes