HTML & CSS: Text on a button - html

Question

I have a social media button at the home page of my personal website. Actually it is working pretty well but when I try to add a text on the button (eg. FOLLOW) the text layer makes it unclickable. My code has no JS function involved. How can I solve this problem?
Thanks in advance.
Edit: CSS code added.
Edit #2: Thank you for all the answers. However the <button> tag and JS codes didn't work for me in this situation. I finally managed to reduce the text layer area by removing height and width properties from the .social-text class and now the text doesn't affect the button functionality. It still overlaps the button but at a minimum area and doesn't cause an issue anymore. I'm adding a screenshot of fixed button. Happy coding!
HTML:
<div>
<ul id="menu">
<a class="menu-button icon-plus" href="#menu" title="Show navigation"></a>
<a class="menu-button icon-minus" href="#0" title="Hide navigation"></a>
<li class="menu-item">
<a href="https://www.instagram.com" target="_blank">
<span class="fa fa-instagram"></span>
</a>
</li>
<li class="menu-item">
<a href="https://www.facebook.com" target="_blank">
<span class="fa fa-facebook"></span>
</a>
</li>
<li class="menu-item">
<a href="https://twitter.com" target="_blank">
<span class="fa fa-twitter"></span>
</a>
</li>
<li class="menu-item">
<a href="https://linkedin.com/in" target="_blank">
<span class="fa fa-linkedin"></span>
</a>
</li>
</ul>
<span class="social-text">FOLLOW</span>
</div>
CSS:
#menu {
text-align: center;
width: 11vw;
height: 11vw;
position: absolute;
left: 50%;
top: 23vw;
margin-left: 23vw;
margin-top: 6vw;
list-style: none;
font-size: 2.5vw;
}
.menu-button {
opacity: 0;
z-index: -1;
}
.menu-button {
width: 11vw;
height: 11vw;
position: absolute;
left: 50%;
top: 50%;
margin: -5.8vw 0 0 -5.8vw;
border-radius: 50%;
background: #424242;
background-size: 100%;
overflow: hidden;
text-decoration: none;
}
#menu:not(:target)>a:first-of-type,
#menu:target>a:last-of-type {
opacity: 1;
z-index: 1;
}
#menu:not(:target)>.icon-plus:before,
#menu:target>.icon-minus:before {
opacity: 1;
}
.menu-item {
width: 5.5vw;
height: 5.5vw;
position: absolute;
left: 55%;
line-height: 1vw;
top: 70%;
margin: -3.9vw 0 0 -3.9vw;
border-radius: 50%;
background-color: #424242;
transform: translate(0vw, 0vw);
transition: transform 500ms;
z-index: -2;
transition: .5s;
}
.menu-item:hover{
opacity: 0.5;
box-shadow: 0 0.4vw 0.8vw black;
}
.menu-item a {
color: #fff;
position: relative;
top: 30%;
left: 0;
text-decoration: none;
}
#menu:target>.menu-item:nth-child(6) {
transform: rotate(60deg) translateY(-11.7vw) rotate(300deg);
transition-delay: 0s;
}
#menu:target>.menu-item:nth-child(5) {
transform: rotate(20deg) translateY(-12.1vw) rotate(-20deg);
transition-delay: 0.1s;
}
#menu:target>.menu-item:nth-child(3) {
transform: rotate(-20deg) translateY(-12.1vw) rotate(20deg);
transition-delay: 0.2s;
}
#menu:target>.menu-item:nth-child(4) {
transform: rotate(-60deg) translateY(-11.7vw) rotate(60deg);
transition-delay: 0.3s;
}
.social-text {
text-align: center;
width: 11vw;
height: 11vw;
position: absolute;
left: 50%;
top: 23vw;
margin-left: 23vw;
margin-top: 6vw;
z-index: 2;
}

Answer 1

Use a button tag in your span i.e,
<span><button class="social-text">Follow</button></span>
or either directly use <button> no need to add <span> . Here goes the JS:-
const btn=document.querySelector('.social-text');
btn.addEventListener("click",function(){
console.log("Followed");
})

Answer 2

You can try using a <button>
const btn = document.getElementById("btn-follow");
btn.addEventListener("click", () => {
console.log("followed");
});
<button id="btn-follow">FOLLOW</button>
Or you could add a role="button" to your span tag
const span = document.getElementById("span-follow");
span.addEventListener("click", () => {
console.log("followed");
});
<span id="span-follow" role="button">FOLLOW</span>
If you want to create a circle button, you can create a circle with a <div> and use it like a <button>
const btn = document.getElementById("btn-follow");
btn.addEventListener("click", () => {
console.log("followed");
});
.social-circle {
text-align: center;
width: 11vw;
height: 11vw;
line-height: 11vw;
border-radius: 50%;
background: #F77;
}
.social-text {
color: #fff;
}
.cursor-pointer {
cursor: pointer;
}
<div class="social-circle cursor-pointer" id="btn-follow" role="button">
<span class="social-text" role="button">FOLLOW</span>
</div>

Answer 3

You haven't used the button tag. So, only the 'Follow' text is showing. Try this.
<button class="social-text">Follow</button>