How to Create a Button With a Transparent Shape

Use transparent images to create form submission buttons.

When creating a button image for use on a website, the image’s background should be transparent so the button looks good on any colored backdrop. In order to create a button from an image, you will need to familiarize yourself with the <button> tag. This tag is understood by all major browsers and easily replaces traditional form submission buttons. Use your new transparent image to replace an otherwise boring submission button on your website.

Instructions

1. • 1
     Save the image as a format that will allow you to preserve the transparency of the background. Formats that support transparency include GIFs, TIFFs, and PNGs. JPEG images will not support a transparent background.
   • 2
     Upload the image to the Internet. In order to include the image in an HTML code it must first be uploaded to a space on the Web so you can directly link the image in your HTML code.
   • 3
     Open your HTML document and scroll down to the part in your HTML code where your existing form and button are located. Replace the form submission button code with the following:
     <button type="button”>
     <img src="Image Url Here”>
     </button>
   • 4
     Replace the “Image Url Here” portion of the code with the direct link to your transparent image. Save the HTML code and upload the page to the Internet to test out your image button.