Buttons with Transparent Icon

by Nico D

HTML

<div class="containers">
    <span>Nico</span>
    <div class="xButton" onclick="alert('ciao!');">
    </div>
</div>
<div class="containers">
    <span>Adele</span>
    <div class="xButton" onclick="alert('ciao!');">
    </div>
</div>

CSS

.xButton:hover { 
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Red_X_Freehand.svg/1024px-Red_X_Freehand.svg.png"); 
    background-size: 17px 17px;
    background-repeat: no-repeat;
    opacity: 0.2;
}
.xButton {    
    height: 20px;
    width: 20px;    
    margin-left: 5px;
    float:right;
}
.containers {
    float: left;
    margin-left: 10px;
    border: 2px #ccc dotted;
    padding: 3px;
    background: #eee;
}

JavaScript

// Bottoni con icona in trasparenza tramite CSS