Check out my custom-made button:
<button class="btn-close">Close alert</button>
Here's the CSS styling for the button:
.btn-close{
position: relative;
height: 30px;
border: none;
background-color: #332b2a;
color: #fff;
outline: none;
cursor: pointer;
}
.btn-close:after {
content: " ";
display: block;
position: absolute;
width: 30px;
height: 30px;
right: -32px;
top: 0;
background-color: #332b2a;
}
Additionally, here's a jQuery snippet for demonstration:
$(document).ready(function(){
$(document).on('click', '.btn-close', function(){
alert("Success!");
});
});
However, there seems to be an issue where clicking on the after element doesn't trigger the click event. Any suggestions on how to solve this problem without using an empty span inside the button would be greatly appreciated.
The button works seamlessly in Chrome, Opera, and Safari, but my Firefox version (27.0.1) seems to have trouble. You can test it out yourself using this jsFiddle example: http://jsfiddle.net/esRBa/1/
Thank you for your assistance!