Add a transparent button to an image using css

<style> .container{ height:200px; width:200px; box-shadow:0 0 6px rgba(0,0,0,.4); display:flex; align-items:center; justify-content:center; background-image:url(https://app.3schools.in/logo.png); background-size:cover; opacity:.6; } .btn { background-color:transparent; color:#ff0000; border:6px solid #ff00ff; border-radius:5px; padding:8px 16px; box-shadow:0 0 8px rgba(0,0,0,0.1); } .btn:hover { background-color:green; } </style> <div class="container"> <button class="btn"> Transparent Button</button> </div>