How to Make Curved Buttons With HTML Code
When creating content for your Web page with HTML code, you are sometimes at the mercy of the way that a Web browser displays the HTML code in graphic form. For example, some codes work well with some browsers, but not as well with others. If you are hoping to make curved buttons for your Web page, you do not need to do anything more than create a normal HTML button. The corners of these buttons appear curved in all major Web browsers, including Internet Explorer, Chrome, Safari and Firefox.
Other People Are Reading
Instructions
-
-
1
Log in to your Web server. Navigate to the Web page on which you want to display curved HTML buttons.
-
2
Click on the page at the location where you want to insert the first of the buttons. This should be within the <body> and </body> tags.
-
-
3
Insert this code:
<button type="button">Type text here</button>
-
4
Replace "Type text here" with the text you want to appear on the button.
-
5
Publish the page.
-
1
Tips & Warnings
Creating buttons that are more round requires extensive CSS and HTML expertise. You also must design the buttons in another program--such as Photoshop or Illustrator--then download them to your server. A sample CSS code that you might include in the <head> section of your page is:
button {
border: 0 none;
cursor: pointer;
font-weight: bold;
padding: 0 15px 0 0;
text-align: center;
height: 30px;
line-height: 30px;
width: auto;
}
button.rounded {
background: transparent URL( btn_right.png ) no-repeat scroll right top;
clear: left;
font-size: 0.8em;
}
button span {
display: block;
padding: 0 0 0 15px;
position: relative;
white-space: nowrap;
height: 30px;
line-height: 30px;
}
button.rounded span {
background: transparent URL( btn_left.png ) no-repeat scroll left top;
color: #FFFFFF;
}
button.rounded:hover {
background-position: 100% -30px;
}
button.rounded:hover span {
background-position: 0% -30px;
}
button::-moz-focus-inner {
border: none;
}
To use this code you must replace the ".png" files with the file paths of the button images you created in another program.
