Would you like to reduce your website load time? Or you just hate javascript, or maybe you create your website via a really annoying website builder which doesn't allow you to use javascript code? Use this "pure css and html" lightbox code snippet! You can change the content or button text inside code snippet. It has no javascript!
Click For The Preview
<!--Koddostu Pure CSS Lightbox Without Javascript START-->
<!--This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.-->
<!--Attribute: koddostu.com-->
<div id="pencerekodu"><label for="pencere" class="dugme">
Click Here
</label><input type="checkbox" class="Pencereac" id="pencere" name="pencere"></input><label class="pencere">
Lightbox content shown here.
<label for="pencere" class="dugme" name="kapat">Close</label></label></div>
<style> .dugme{cursor:pointer;display:inline-block;padding:5px 10px;background:#eee;border:1px solid #d8d8d8;font-family:Helvetica, Arial, sans-serif;font-size:14px;color:#444; -webkit-border-radius: 3px; border-radius: 3px; } [name="kapat"]{position:absolute;bottom:20px;right:20px;} .pencere{ position:fixed;top:-50%;left:-50%; width:380px;height:280px;background:#fff;box-shadow:0 0 6px 2px rgba(0,0,0,0.4); opacity:0; transition:opacity 0.6s ease-out; z-index:-1; padding:10px; -webkit-border-radius: 3px; border-radius: 3px; margin:-150px 0 0 -200px; } .Pencereac{width:1px;height:1px;visibility:hidden;} .Pencereac:checked + .pencere{ top:50%;left:50%; display:block; z-index:9; opacity:1;}</style>
<!--This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.-->
<!--Attribute: koddostu.com-->
<!--Koddostu Pure CSS Lightbox Without Javascript STOP-->