The Anatomy of A Button

by | Jan 7, 2019 | Articles

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





By Steve Law
Steve founded Mission Bell Communications in 2015. Before that Steve worked in the technology industry and also worked for a nonprofit organization in Mexico. Steve has always loved technology, and all things creative.