I'm facing an issue with a button that has an icon and text below it. The clickable area is only around the icon and text, not on them.
https://i.sstatic.net/55FWF.png
scss file
.navbar {
background-color: #292929;
height: 70px;
}
.button {
display: flex;
flex-direction: column;
background-color: transparent !important;
color: white !important;
margin-left: 100px;
margin-top: 5px;
width: 60px;
height: 60px;
padding: 10px;
}
.bx {
margin-left: 15px;
font-size: 30px;
}
.icon {
flex: 1;
}
.text {
text-align: center;
color: white;
font-size: 12px;
margin-left: 4px;
}
/* Add hover effect to the button */
.button:hover .text,
.button:hover .bx {
color: red;
}
html
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-start">
<!-- Button on the left side -->
<button class="button" (click)="logInfo()">
<span class="icon">
<i class='bx bx-file-find'></i>
</span>
<a href="#" class="text">Scan</a>
</button>
</div>
<div class="navbar-end">
<!-- Text on the far right side -->
<div class="navbar-item is-size-5 has-text-white">test</div>
<img src="assets/favicon.ico" />
</div>
</nav>
The solutions I tried so far include adding padding and margin, setting pointer-events to none, changing the display to block which caused the text to move, using a different icon, and applying z-index:999 but none of these fixed the issue.