Take a look at the desired effect in my mockup.
I have successfully masked an image to a button within my form
However, when I apply a blur to the background-image, the edges of my button become too soft, which is not what I want.
Is there a way to keep the hard edges of the button while still having the text appear on top?
Check out the Pen: http://codepen.io/anon/pen/PWpMpX
HTML
<form>
<!-- Inputs not shown -->
<button id="gButton">Preview Album »</button>
</form>
CSS
button#gButton{
display: block;
width: 280px;
height: 42px;
border: none;
border-radius: 11px;
background-color: #B08DC0;
color: #fff;
font-size: 16px;
font-weight: 600;
cursor: pointer;
/*Background Image Stuff Below*/
background-image: url(https://upload.wikimedia.org/wikipedia/en/3/35/Flume_-_Skin.png);
background-size: 140%;
background-position: center;
-webkit-background-clip: content-box;
background-clip: content-box;
color: rgba(0,0,0,0);
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
form{
width: 280px;
margin:0 auto;
display: block;
text-align: center;
margin-top: 50px;
}