<style type="text/css">
.downloadbutton {
width: 67px;
height: 20px;
background-color: #31B404;
border-radius: 15px;
border: 3px solid #009900;
padding: 5px;
}
.downloadbutton A:link {color: white; text-decoration:none}
</style>To place the button on the page, I can use the following
<p class="downloadbutton"><a href="css-cheat-sheet-v2.pdf">Download</a></p>
E.g.:
CSS Cheat Sheet V2
Source:
Dave Child at
AddedBytes
Released under a
Creative
Commons License
The width and height of the button are controlled by the width
and height values, e.g. width: 67px and height:
20px in this case, which sets the size in pixels. The green background
for the button is set with background-color: #31B404. You can
find color code values at HTML Color
Codes. You can set a border around the button with border
, e.g. border: 3px solid #009900, which sets a solid border
3 pixels in width in a darker shade of green. The padding value
sets the padding space between the text and the edge of the button.
If you wish the button to have rounded corners, include a
border-radius value. Details on how the value controls the
rounding can be found at
border-radius. If you wish the button to look rectangular without the
rounded borders, omit the border-radius line.
Since the text, which is the clickable element in the button, is a hyperlink,
you can control how it looks with CSS, also. If you don't want the text you
are using on the button to be underlined, use text-decoration-none.
You can have the text be white and with no underline with the following code:
.downloadbutton A:link {color: white; text-decoration:none;}
If you wanted to keep the text color as white, even after someone clicks on the link, you could also add the following:
.downloadbutton A:visited {color: white; text-decoration:none;}
References:
Created: Friday January 2, 2015