<a href="#" data-text="Button 1" class="button button-1" >Button 1</a>


<style type="text/css">


.button-1 {


   font-weight: 400;


   outline: 0;


   padding: 8px 15px;


   text-align: center;


   -webkit-border-radius: 2px;


   -moz-border-radius: 2px;


   border-radius: 2px;


   cursor: pointer;


   background-color: #09c;


   background-image: -webkit-gradient(linear, left top, left bottom, from(#2faddb), to(#09c));


   background-image: -webkit-linear-gradient(top, #2faddb, #09c);


   background-image: -moz-linear-gradient(top, #2faddb, #09c);


   background-image: -ms-linear-gradient(top, #2faddb, #09c);


   background-image: -o-linear-gradient(top, #2faddb, #09c);


   background-image: linear-gradient(top, #2faddb, #09c);


   filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#2faddb', EndColorStr='#0099cc',GradientType=0);


   border: 1px solid #3990ab;


   color: #fff;


}


.button-1:hover {


   background-color: #61C6ED;


   background-image: -webkit-gradient(linear, left top, left bottom, from(#61C6ED), to(#61C6ED));


   background-image: -webkit-linear-gradient(top, #61C6ED, #61C6ED);


   background-image: -moz-linear-gradient(top, #61C6ED, #61C6ED);


   background-image: -ms-linear-gradient(top, #61C6ED, #61C6ED);


   background-image: -o-linear-gradient(top, #61C6ED, #61C6ED);


   background-image: linear-gradient(top, #61C6ED, #61C6ED);


   filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#61C6ED', EndColorStr='##61C6ED',GradientType=0);


   border: 1px solid #6ABAD5;


   color: #fff;


}


.button-1:active {


   background-color: #09c;


   background-image: -webkit-gradient(linear, left top, left bottom, from(#0F6B8E), to(#0F6B8E));


   background-image: -webkit-linear-gradient(top, #0F6B8E, #0F6B8E);


   background-image: -moz-linear-gradient(top, #0F6B8E, #0F6B8E);


   background-image: -ms-linear-gradient(top, #0F6B8E, #0F6B8E);


   background-image: -o-linear-gradient(top, #0F6B8E, #0F6B8E);


   background-image: linear-gradient(top, #0F6B8E, #0F6B8E);


   filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#0F6B8E', EndColorStr='#0F6B8E',GradientType=0);


   border: 1px solid #13586F;


   color: #fff;


}


</style>





<a href="#" data-text="Button 2" class="button button-2" >Button 1</a>


<style type="text/css">


.button-2 {


   color: #555;


   border: 1px solid #ccc;


   background: white;


   margin-right: 10px;


   border-radius: 1px;


   -webkit-border-radius: 1px;


   -moz-border-radius: 1px;


   box-shadow: 1px 1px 5px #EEE;


   -webkit-box-shadow: 1px 1px 5px #EEE;


   -moz-box-shadow: 1px 1px 5px #EEE;


   background: white;


   padding: 8px 15px;


   cursor: pointer;


}


.button-2:hover {


   background-color: #efefef;


   color: #555;


}


.button-2:active {


   background-color: #dddddd;


}


</style>





<a href="#" data-text="Button 3" class="button button-3" >Button 3</a>


<style type="text/css">


.button-3 {


   background-color: #400090;


   color: #fff;


   border-radius: 3px;


   -webkit-border-radius: 3px;


   -moz-border-radius: 3px;


   -webkit-font-smoothing: antialiased;


   border: 1px solid #6c4988;


   padding: 8px 15px;


   cursor: pointer;


}


.button-3:hover {


   background-color: #7432C8;


   color: #fff;


}


.button-3:active {


   background-color: #29005E;





}


</style>





<a href="#" data-text="Button 4" class="button button-4" >Button 4</a>


<style type="text/css">


.button-4 {


   cursor: pointer;


   background: #1ca5d5;


   padding: 9px 16px;


   color: #fff;


   -moz-border-radius: 1px;


   border-radius: 1px;


   -webkit-border-radius: 1px;


   text-decoration: none;


   border:none;


}


.button-4:hover {


   background: #52C4EA;


   color: #fff;


}


.button-4:active {


   background: #096A8A;


}


</style>





<a href="#" data-text="Button 5" class="button button-5" >Button 5</a>


<style type="text/css">


.button-5 {


   cursor: pointer;


   background-color: #fff;


   padding: 8px 15px;


   color: #bd0020;


   -moz-border-radius: 2px;


   border-radius: 2px;


   -webkit-box-shadow: 0px 2px 1px rgb(249,221,221);


   -moz-box-shadow: 0px 3px 1px rgb(249,221,221);


   box-shadow: 0px 2px 1px rgb(249,221,221);


   border: none;


}


.button-5:hover {


   background-color: rgba(249,221,221,0.3);


   color: #bd0020;


}


.button-5:active {


   background-color: rgba(249,221,221,0.5);


}


</style>





<a href="#" data-text="Button 6" class="button button-6" >Button 6</a>


<style type="text/css">


.button-6 {


   cursor: pointer;


   padding: 8px 15px;


   border: 1px solid #3079ed;


   color: #fff;


   text-shadow: 0 1px rgba(0,0,0,0.1);


   background-color: #4d90fe;


   background-image: -webkit-gradient(linear,left top,left bottom,from(#4d90fe),to(#4787ed));


   background-image: -webkit-linear-gradient(top,#4d90fe,#4787ed);


   background-image: -moz-linear-gradient(top,#4d90fe,#4787ed);


   background-image: -ms-linear-gradient(top,#4d90fe,#4787ed);


   background-image: -o-linear-gradient(top,#4d90fe,#4787ed);


   background-image: linear-gradient(top,#4d90fe,#4787ed);


}


.button-6:hover {


   background-color: #3079ed;


   background-image: none;


   color: #fff;


}


</style>





<a href="#" data-text="Button 7" class="button button-7" >Button 7</a>


<style type="text/css">


.button-7 {


   cursor: pointer;


   border: 2px solid #d14836;


   padding: 7px 14px;


   color: #fff;


   text-shadow: 0 1px rgba(0,0,0,0.1);


   background-color: #d14836;


   background-image: -webkit-gradient(linear,left top,left bottom,from(#dd4b39),to(#d14836));


   background-image: -webkit-linear-gradient(top,#dd4b39,#d14836);


   background-image: -moz-linear-gradient(top,#dd4b39,#d14836);


   background-image: -ms-linear-gradient(top,#dd4b39,#d14836);


   background-image: -o-linear-gradient(top,#dd4b39,#d14836);


   background-image: linear-gradient(top,#dd4b39,#d14836);


}


.button-7:hover {


   background-color: #d14836;


   color: #fff;


   background-image: none;


}


</style>





<a href="#" data-text="Button 8" class="button button-8" >Button 8</a>


<style type="text/css">


.button-8 {


   cursor: pointer;


   -webkit-box-shadow: 0 1px 0 rgba(0,0,0,.05);


   box-shadow: 0 1px 0 rgba(0,0,0,.05);


   background-color: #53a93f;


   border: 1px solid #53a93f;


   color: #fff;


   text-shadow: none;


   padding: 8px 15px;


}


.button-8:hover {


   border-color: #4c8534;


   color: #fff;


}


.button-8:active {


   background-color: #4c8534;


}


</style>





<a href="#" data-text="Button 9" class="button button-9" >Button 9</a>


<style type="text/css">


.button-9 {


   cursor: pointer;


   -webkit-box-shadow: 0 1px 0 rgba(0,0,0,.05);


   box-shadow: 0 1px 0 rgba(0,0,0,.05);


   background-color: #fff;


   color: #404040;


   border: 1px solid #d9d9d9;


   border: 1px solid rgba(0,0,0,.15);


   padding: 8px 15px;


}


.button-9:hover {


   border: 1px solid #b8b8b8;


   color: #404040;


}


.button-9:active {


   background-color: #efefef;


}


</style>





<a href="#" data-text="Button 10" class="button button-10" >Button 10</a>


<style type="text/css">


.button-10 {


   padding: 8px 15px;


   cursor: pointer;


   border: 1px solid #cccccc;


   border-radius: 4px;


   -webkit-border-radius: 4px;


   -moz-border-radius: 4px;


   color: #333333;


   background-color: #ffffff;


}


.button-10:hover {


   background-color: #efefef;


   color: #ffffff;


}


</style>





<a href="#" data-text="Button 11" class="button button-11" >Button 11</a>


<style type="text/css">


.button-11 {


   padding: 8px 15px;


   cursor: pointer;


   border: 1px solid #d43f3a;


   border-radius: 4px;


   -webkit-border-radius: 4px;


   -moz-border-radius: 4px;


   color: #ffffff;


   background-color: #d9534f;


}


.button-11:hover {


   background-color: #d43f3a;


   color: #ffffff;


}


</style>





<a href="#" data-text="Button 12" class="button button-12" >Button 12</a>


<style type="text/css">


.button-12 {


   padding: 8px 15px;


   cursor: pointer;


   border: 1px solid #4cae4c;


   border-radius: 4px;


   -webkit-border-radius: 4px;


   -moz-border-radius: 4px;


   color: #ffffff;


   background-color: #5cb85c;


}


.button-12:hover {


   background-color: #4cae4c;


   color: #ffffff;


}


</style>





<a href="#" data-text="Button 13" class="button button-13" >Button 13</a>


<style type="text/css">


.button-13 {


   padding: 8px 15px;


   cursor: pointer;


   border: 1px solid #18bc9c;


   border-radius: 4px;


   -webkit-border-radius: 4px;


   -moz-border-radius: 4px;


   color: #ffffff;


   background-color: #18bc9c;


}


.button-13:hover {


   background-color: #318D7B;


   border-color: #087A64;


   color: #ffffff;


}


</style>





<a href="#" data-text="Button 14" class="button button-14" >Button 14</a>


<style type="text/css">


.button-14 {


   padding: 8px 15px;


   cursor: pointer;


   border: 1px solid #2c3e50;


   border-radius: 4px;


   -webkit-border-radius: 4px;


   -moz-border-radius: 4px;


   color: #ffffff;


   background-color: #2c3e50;


}


.button-14:hover {


   background-color: #28323C;


   border-color: #0E2134;


   color: #ffffff;


}


</style>





<a href="#" data-text="Button 15" class="button button-15" >Button 15</a>


<style type="text/css">


.button-15 {


   padding: 8px 15px;


   cursor: pointer;


   border: 1px solid #73a839;


   border-radius: 4px;


   -webkit-border-radius: 4px;


   -moz-border-radius: 4px;


   color: #ffffff;


   background-color: #73a839;


   padding: 8px 15px;


   cursor: pointer;


   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#88c149), color-stop(60%, #73a839), to(#699934));


   background-image: -webkit-linear-gradient(#88c149, #73a839 60%, #699934);


   background-image: -moz-linear-gradient(top, #88c149, #73a839 60%, #699934);


   background-image: linear-gradient(#88c149, #73a839 60%, #699934);


   background-repeat: no-repeat;


   border-bottom: 1px solid #59822c;


}


.button-15:hover {


   background-image: none;


   color: #ffffff;


}


.button-15:active {


   background-image: none;


   background-color: #59822c;


}


</style>





<a href="#" data-text="Button 16" class="button button-16" >Button 16</a>


<style type="text/css">


.button-16 {


   padding: 8px 15px;


   cursor: pointer;


   border: 1px solid #033c73;


   border-radius: 4px;


   -webkit-border-radius: 4px;


   -moz-border-radius: 4px;


   color: #ffffff;


   background-color: #033c73;


   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#04519b), color-stop(60%, #033c73), to(#02325f));


   background-image: -webkit-linear-gradient(#04519b, #033c73 60%, #02325f);


   background-image: -moz-linear-gradient(top, #04519b, #033c73 60%, #02325f);


   background-image: linear-gradient(#04519b, #033c73 60%, #02325f);


   background-repeat: no-repeat;


   border-bottom: 1px solid #022241;


   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff04519b', endColorstr='#ff02325f', GradientType=0);


}


.button-16:hover {


   background-image: none;


   color: #ffffff;


}


</style>





<a href="#" data-text="Button 17" class="button button-17" >Button 17</a>


<style type="text/css">


.button-17 {


   padding: 8px 15px;


   cursor: pointer;


   color: #ffffff;


   background-color: #c71c22;


   border: 1px solid #c71c22;


   border-radius: 4px;


   -webkit-border-radius: 4px;


   -moz-border-radius: 4px;


   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#e12b31), color-stop(60%, #c71c22), to(#b5191f));


   background-image: -webkit-linear-gradient(#e12b31, #c71c22 60%, #b5191f);


   background-image: -moz-linear-gradient(top, #e12b31, #c71c22 60%, #b5191f);


   background-image: linear-gradient(#e12b31, #c71c22 60%, #b5191f);


   background-repeat: no-repeat;


   border-bottom: 1px solid #9a161a;


   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe12b31', endColorstr='#ffb5191f', GradientType=0);


}


.button-17:hover {


   background-image: none;


   color: #ffffff;


}


</style>





<a href="#" data-text="Button 18" class="button button-18" >Button 18</a>


<style type="text/css">


.button-18 {


   padding: 8px 15px;


   cursor: pointer;


   color: #ffffff;


   background-color: #c71c22;


   border: 1px solid #c71c22;


   border-radius: 4px;


   -webkit-border-radius: 4px;


   -moz-border-radius: 4px;


}


.button-18:hover {


   color: #ffffff;


}


</style>





<a href="#" data-text="Button 19" class="button button-19" >Button 19</a>


<style type="text/css">


.button-19 {


   padding: 8px 15px;


   cursor: pointer;


   color: #333;


   background-color: #f6e312;


   border: 1px solid #e9ac1a;


   filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFF6E312', endColorstr='#FFF9C80D');


   background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f6e312), color-stop(100%, #f9c80d));


   background-image: -webkit-linear-gradient(top, #f6e312 0%,#f9c80d 100%);


   background-image: -moz-linear-gradient(top, #f6e312 0%,#f9c80d 100%);


   background-image: -o-linear-gradient(top, #f6e312 0%,#f9c80d 100%);


   background-image: linear-gradient(top, #f6e312 0%,#f9c80d 100%);


}


.button-19:hover {


   color: #333;


}


</style>





You can use a basic formatting that was common to all of the buttons


<style type="text/css">


.button {


   text-decoration: none;


   display: inline-block;


   color: #fff;


   font-family: 'Helvetica Neue', helvetica, sans-serif;


   font-size: 12px;


   margin: 5px;


}


.button:hover {


   text-decoration: none;


}


</style>