HTML CSS Exercise: CSS3 Image Rounded

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

Solution:

HTML Code:

<!doctype html>
<html>
<head>
<title>HTML CSS Exercise - create button with CSS3</title><!-- Title of the HTML document -->
<style>/* Begins CSS styling */
button {
width: 200px; /* Setting the width of the button */
padding:8px; /* Adding padding inside the button */
background-color: #428bca; /* Setting background color of the button */
border-color: #357ebd; /* Setting border color of the button */
color: #fff; /* Setting text color of the button */
-moz-border-radius: 10px; /* Setting border radius for Mozilla Firefox */
-webkit-border-radius: 10px; /* Setting border radius for Webkit based browsers */
border-radius: 10px; /* Setting border radius for modern browsers */
-khtml-border-radius: 10px; /* Setting border radius for old Konqueror browsers */
text-align: center; /* Center aligning the text inside the button */
vertical-align: middle; /* Aligning the button vertically in the middle */
border: 1px solid transparent; /* Setting a transparent border around the button */
font-weight: 900; /* Setting the font weight of the text inside the button */
font-size:125% /* Setting the font size of the text inside the button */
}
</style>
<title>Untitled Document</title>
</head>
<body>
<button>Subscribe Now</button><!-- Button element with the text "Subscribe Now" -->
</body>
</html>

Explanation:

This HTML document defines a button styled using CSS.
The button has a fixed width and padding to give it some spacing.
It has a blue background with a darker blue border.
The text color is white for better visibility against the background.
Border radius is applied to round the corners of the button.
Text inside the button is centered both horizontally and vertically.
A transparent border is set around the button.
The font weight is set to bold and the font size is increased by 25%.
Overall, the code demonstrates how to create a styled button using HTML and CSS.

Live Demo:

See the Pen image-rounded-answer by w3resource (@w3resource) on CodePen.

Supported browser


Yes	Yes	Yes	Yes	Yes