<a href="#" class="stripe-box">
<p>stripebox-hover</p>
</a>
.stripe-box{
background-size: auto auto;
background-color: rgba(254, 196, 110, 1);
background-image: repeating-linear-gradient(
135deg
, transparent, transparent 5px, rgba(255, 214, 154, 1) 5px, rgba(255, 214, 154, 1) 10px );
padding:5px 15px;
display:block;
text-decoration:none;
color:#333;
}
.stripe-box > p{
background:#fff;
padding:15px;
}
.stripe-box:hover{
background-size: auto auto;
background-color: rgba(255, 214, 154, 1);
background-image: repeating-linear-gradient(
135deg
, transparent, transparent 5px, rgba(254, 196, 110, 1) 5px, rgba(254, 196, 110, 1) 10px );
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.