On this page, I will show you how to exactly make circular, responsive, 3D CSS buttons that have a highlight hover effect when the mouse cursor is placed over them.
Widget Code:
<p style="margin-bottom: 0.5rem;text-align: center;display:inline-block;"> <a style="color:white;display: inline-block;width:32%;" href="https://www.patreon.com/biohacking"><img class="ocs" src="https://Website.com/YourImageUrl.png" alt="Bio hacking patreon"> Support Bio Hacking</a> <a style="color:white;display: inline-block;width:32%;" href="https://www.reddit.com/r/Bio_Hacking/"><img class="ocs" src="https://Website.com/YourImageUrl.png" alt="Bio hacking subreddit"> Check out r/Bio_Hacking</a> <a style="color:white;display: inline-block;width:32%;" href="https://www.therevisionist.org/bio-hacking/"><img class="ocs" src="https://Website.com/YourImageUrl.png" alt="Bio hacking home"> Bio Hacking Home</a> </p>
OCS Class:
.ocs { border: solid #f60; border-radius: 100%; box-shadow: 2px 2px 3px #000000; -webkit-transition: opacity .3s linear; -moz-transition: opacity .3s linear; -o-transition: opacity .3s linear; transition: opacity .3s linear; } .ocs:hover { opacity: .8; }
—