The Anatomy of A Button

In this video we used the free Brackets Code editor by Adobe.  You can download it at: http://brackets.io

The Code We used:

&nbsp;<br>
<div>
<a href=”#” class=”button” style”font-family: georgia”>Donate Now!</a>
</div>

<style>
.button {
font-size: 22px;
text-decoration: none;
text-transform: uppercase;
font-family: lato, sans-serif;
background: red;
color: white;
padding: 8px 25px;
border-style: solid;
border-color: firebrick;
border-width: 2px 2px 6px 2px;
text-shadow: 0 1px rgba(0,0,0,0.5);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
transition: all .25s;
border-radius: 50px;

}

.button:hover {
background: firebrick;
border-color: red;
text-shadow: 0 -1px rgba(0,0,0,0.5);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);

}

</style>