i have div acting round button. styled significant part of overall appearance comes box-shadow:
<body style="background:black"> <div id="button" style="width: 50px; height: 50px; background: yellow; border: none; border-radius: 50px; box-shadow: 0 0 0 5px #c03, 0 0 2px 7px #fff"></div> </body>i have click event listener attached button div. unfortunately, doesn't respond if div clicked on box-shadow box-shadow rendered outside div.
this particularly problem on touch devices finger doesn't hit center of div. (of course, responds if click within div's 50px area.)
is possible make event listener respond clicks on box-shadow actual div?
i realise can use separate , larger transparent div on top of button , attach event listener that, such workaround necessary?
(the button div must styled box-shadow. can't use border property or increase padding.)
yes, changing box-shadow inset shadow make area occupied shadow clickable. inset box-shadow added within element , hence click on shadow treated click on div.
window.onload = function() { var btn = document.queryselector("#button"); var btnoriginal = document.queryselector("#button-original"); btn.addeventlistener("click", function() { alert("i have been clicked"); }); btnoriginal.addeventlistener("click", function() { alert("i have been clicked"); }); }#button { width: 64px; height: 64px; border: none; border-radius: 50px; box-shadow: inset 0 0 2px 2px #fff, inset 0 0 0 7px #c03; } #button-original { width: 50px; height: 50px; border: none; border-radius: 50px; box-shadow: 0 0 0 5px #c03, 0 0 2px 7px #fff; } /* demo */ #button { margin: 10px; } #button-original { margin: 17px; } div:hover { cursor: pointer; } body{ background: black;<div id="button"></div><!-- modified version --> <div id="button-original"></div><!-- original version -->the following points need considered while changing shadow inset one:
- since
box-shadowadded inside, height , width ofdivshould increased bit make sure final outcome same size original version. in normalbox-shadowversion, size of shape container's radius + spread radius. - you may have adjust margins have done in sample below.
- any blur added shadow applied inwards (that is, blur blend inner part of container , not body). can nothing this.
note: in above snippet, have replaced inline style attribute's contents css.
if want second shadow (the white colored one) blur towards outside , blend body background, replace box-shadow radial-gradient in below sample. there 2 drawbacks of using radial-gradient, 1 has lower browser support , second curves not smooth when element's size small.
window.onload = function() { var btn = document.queryselector("#button"); var btn2 = document.queryselector("#button-2"); btn.addeventlistener("click", function() { alert("i have been clicked"); }); btn2.addeventlistener("click", function() { alert("i have been clicked"); }); }#button { width: 75px; height: 75px; border: none; border-radius: 50%; background-image: radial-gradient(circle @ 50% 50%, transparent 57.5%, #c03 57.5%, #c03 65%, #fff 65%, transparent 72%); } #button-2 { height: 150px; width: 150px; border: none; border-radius: 50%; background-image: radial-gradient(circle @ 50% 50%, transparent 57.5%, #c03 57.5%, #c03 65%, #fff 65%, transparent 72%); } div:hover { cursor: pointer; } body { background: black; }<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> <div id="button"></div> <div id="button-2"></div>
Comments
Post a Comment