On our website, there is a button that we are trying to turn into a link without the tape on top of it.
The issue we're facing is that creating the link also affects the empty space in the top left corner of the tape graphic.
Our Attempts
We attempted to straighten and rotate the tape using CSS. While this solution worked well, it's not supported in older browsers. Additionally, we prefer the link to only be active within the white space of the container div.
HTML Code
<div class="box-body buttons-text clearfix">
<a href="#">
<div class="tape"></div>
<img src="/images/fire.png" class="left">
<span>HOT JOB</span>
</a>
</div>
CSS Styles
.box-body {
padding: 10px 20px;
position: relative;
background: #ffffff;
-webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
}
.tape {
background: url("../images/tape.png") center 0 no-repeat;
width: 145px;
height: 54px;
position: absolute;
bottom: 46px;
left: 83px;
}