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"> 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"> 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"> Bio Hacking Home</a> </p>