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:
Live Demo:
See the Pen image-rounded-answer by w3resource (@w3resource) on CodePen.
Supported browser
What is the difficulty level of this exercise?
Test your Programming skills with w3resource's quiz.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4