Transparent buttons look great, particularly on top of homepage background images. Match the border and font colour to your site, then set the hover background colour to a solid colour.
.button {background-color: transparent; color: #222; border: 1px solid #222;}
.button:hover {background-color: #000; color: #fff;}
Depending on where your buttons are located, you may need to add some additional classes to the front.
For example:
/*--Transparent buttons in Home Top (Template 1)--*/
.home-top .button {background-color: transparent; color: #222; border: 1px solid #222;}
.home-top .widget .button:hover {background-color: #000; color: #fff;}
/*--Transparent buttons in content--*/
.entry-content a.button {background-color: transparent; color: #222; border: 1px solid #222;}
.entry-content a.button:hover {background-color: #000; color: #fff;}