JSFiddle - React, Tailwind, and code Playground

by sstur

HTML

<div>
    <button></button>
</div>

CSS

body {
    padding: 5px;
}
div {
    position: relative;
    background: #eee;
    width: 250px;
    height: 167px;
    background: url(https://c2.staticflickr.com/4/3950/15530766165_1e396849df.jpg);
    background-size: cover;
}
button, button:before, button:after {
    display: block;
    width: 6px;
    height: 6px;
    background: #000;
}
button {
    margin: 0;
    padding: 0;
    box-sizing: content-box;
    background-clip: padding-box;
    position: absolute;
    top: 20px;
    right: 20px;
    border: 16px solid rgba(255, 255, 255, .4);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .8);
    outline: none;
    cursor: pointer;
}
button:before {
    content: "";
    position: absolute;
    top: 0;
    left: -9px;
}
button:after {
    content: "";
    position: absolute;
    top: 0;
    right: -9px;
}

JavaScript

var btn = document.querySelector('button');
btn.addEventListener('click', function() {
    console.log('button clicked');
}, false);