Button with html data-attribute
Button with html data-attribute
by bluey
HTML
<div class='button_epos_e button_epos_e-border quickcash' data-test='boob'>
<div class='button_epos_e_content'>
Button
</div>
</div>
CSS
div[class*="button_epos_e-"] {
background: #4FBEFF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.button_epos_e-dark {
box-shadow: 0 0 5px 2px rgba(0,0,0,.35)
}
.button_epos_e-light {
box-shadow: 0 0 0 10px rgba(255,255,255,.25)
}
.button_epos_e-inset {
box-shadow: inset 0 0 7px 4px rgba(255,255,255,.5)
}
.button_epos_e-border {
box-shadow: inset 0 0 0 5px rgba(255,255,255,.5)
}
.button_epos_e_content {
padding-top: 22px;
padding-bottom: 10px;
text-align: center;
font-size: 20px;
font-size: 16px;
font-weight:bold;
}
.button_epos_e:hover {
background: #B5E3FF;
}
.button_epos_e {
cursor: pointer;
width: 100%;
height: 80px;
position: relative;
float: left;
}
JavaScript
$(".quickcash").click( function() {
alert($(this).data("test"));
});