How to Make Responsive Circle CSS Buttons with border, drop shadow, and hover effect

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"> &nbsp;&nbsp;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"> &nbsp;&nbsp;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"> &nbsp;&nbsp;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;
}

—