The Anatomy of A Button

By steveJanuary 7, 2019

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

The Code We used:

<a href="#" class="button" style"font-family: georgia">Donate Now!</a>

.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);





Mission Bell Communications Inc.
A-44 Frederick St.
Stratford, ON N5A 3V4
+1 (226) 921-5070

©2020 Mission Bell Communications Inc.  All Rights Reserved