How to Make CSS Buttons with Custom Icons for WordPress Sidebar

On this page, I will show you how to make a custom css button with a custom image from your WordPress library as a logo, for your sidebar:

Button Class Code (this code goes to your additional CSS or your stylesheet CSS):

.bbtn {
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  -webkit-border-radius: 3;
  -moz-border-radius: 3;
  border-radius: 3px;
  -webkit-box-shadow: 0px 1px 3px #666666;
  -moz-box-shadow: 0px 1px 3px #666666;
  box-shadow: 0px 1px 3px #666666;
  color: #ffffff;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.bbtn:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}

Button Widget Code (this code goes into your widget; customize the attributes to fit your requirements):

<p style="margin-bottom: 0.5rem;text-align: left;font-size: 16px;">
<a style="color:white;display: inline-block;" class="bbtn" href="https://www.patreon.com/biohacking"><img style="width:15%;" src="YOUR IMAGE URL" alt="Bio hacking patreon"> &nbsp;&nbsp;Support Bio Hacking</a>
</p>
<p style="margin-bottom: 0.5rem;text-align: left;font-size: 16px;">
<a style="color:white;display: inline-block;" class="bbtn" href="https://www.reddit.com/r/Bio_Hacking/"><img style="width:15%;" src="YOUR IMAGE URL" alt="Bio hacking subreddit"> &nbsp;&nbsp;Check out r/Bio_Hacking</a>
</p>
<p style="margin-bottom: 0.5rem;text-align: left;font-size: 16px;">
<a style="color:white;display: inline-block;" class="bbtn" 
href="https://www.therevisionist.org/bio-hacking/"><img style="width:15%;" src="YOUR IMAGE URL" alt="Bio hacking home"> &nbsp;&nbsp;Bio Hacking Home</a>
</p>