What is the best way to soften the background image without losing its sharp edges?

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 &raquo;</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; 
}

Answer №1

To improve the design, I suggest utilizing a pseudo-element for the background image.

button {
    width: 280px;
    height: 42px;
    
    position: relative;
    overflow: hidden;
    background: transparent;
    border: 1px solid #B08DC0;
    border-radius: 11px;
    color: #fff;
}

button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    
    width: 100%;
    height: 100%;
    
    /* Background... */
    background-image: url(//example.com/image.png);
    background-size: 140%;
    background-position: center;
    background-clip: content-box;
    filter: blur(5px);
}
<button>Some Text</button>

You have the option to adjust the size and offsets of the pseudo-element for different effects. This allows you to eliminate any unwanted glowing edges around the image.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to identify the appropriate class name for searching in Selenium?

I'm currently on a mission to find an element based on its class name. I have extracted this snippet from the page source (which I saved as a file using BeautifulSoup): <div class="flex flex-column"><div... If I attempt to pinpoin ...

Error: The hyperlink in the response from the Ajax request is not functioning as expected

I've exhausted all the suggestions for fixing this issue, but nothing has worked so far. Currently, my setup involves making an AJAX call to a PHP page called livesearch.php from the index page in order to retrieve live search results. <html> ...

What is the process for creating a Popover in Rails 4.2.5 with the bootstrap-sass gem (Bootstrap 2)?

Recently, I made the decision to upgrade my Rails 4.2.2 application to Rails 4.2.5 due to a security update. The previous version was running on Ruby 2.2.2 and utilized the gem twitter-bootstrap-rails for Bootstrap 2. However, I encountered a Ruby error wh ...

Tips for aligning child DIVS with UL elements in the center

I am currently working on the footer design, but I am facing an issue with aligning the 4 divs containing links in the center. While Dreamweaver shows them centralized, they appear decentralized when uploaded or tested on JSFIDDLE. My ideal layout would l ...

Issue with parameter functionality not working as expected

This code snippet is not functioning as expected. I am trying to extract and print the values from the URL parameter file:///C:/Users/laddi/Desktop/new%201.html?t=vindu&b=thind function GetURLParameterValue(param) { var pageURL = window. ...

Leveraging an AngularJS variable within an iframe

Is it possible to use a variable inside an iframe src or ng-src attribute? I've tried different variables but none seem to be recognized. For example: <iframe ng-src="http://www.example.com/?name={{test}}"> </iframe> The variable test ju ...

"Exploring the versatility of the width property in flexbox

If I change the flex-wrap to nowrap in the given code snippet with a width of 33.3333333333%, what would be the new calculation for the width? .box{ color: white; font-size: 100px; text-align: center; text-shadow: 4px 4px 0 rgba(0, 0, 0, 0, 1); ...

Ways to center text vertically within a cell in a Bootstrap 5 table

I am trying to achieve vertical alignment in one of the cells of a table I created. According to the Bootstrap 5 documentation, the vertical-alignment utilities only affect certain elements like inline, inline-block, inline-table, and table cell elements. ...

gh-pages: Images that should not be cached

Every time my build server completes a new build, it automatically uploads a pass/fail graphic to the gh-pages branch. I'm looking to showcase this graphic on my project's page. Unfortunately, it appears that gh-pages is caching the image. Any s ...

Creating a visually appealing line design with customizable column widths using CSS

Currently, I am working on designing a user registration page for a testing application and facing some challenges with the layout. CSS has never been my strong suit, but I can manage to style most of the elements except for one - the birthday field. My fo ...

Utilizing JavaScript, create a dynamic grid gallery with Div Spin and expand functionality

I am looking to create a unique effect where a div rotates onclick to reveal a grid gallery on the rear face. Starting this project feels overwhelming and I'm not sure where to begin. <ul class="container-fluid text-center row" id=" ...

Learn the method for toggling images in HTML while simultaneously storing a 0 or 1 in a flag variable

In my design, I would like to have a star icon that displays two star icons at once - one blank and the other yellow. These stars will swap their appearance when clicked or tapped on touch screen devices. Additionally, I want to be able to store values as ...

Executing PHP code on button click in HTMLThe process of running a PHP script when

I am currently working on a project that involves detecting facial expressions using Python. However, I need to pass an image to this code through PHP. The PHP code provided below saves the image in a directory. How can I trigger this code using an HTML ...

The HTML5 Websocket Script functions smoothly on Ubuntu but encounters issues on both Win7 and WinXP operating systems

I recently set up lemmingzshadow / php-websocket on my Windows 7 machine, following simple steps: Unzipped the files into my htdocs folder. Ran server.php from the command line. Accessed the file /client/status.html from a Websockets-compatible browser. ...

Utilizing the req.body object in a GET request with Node.js

I'm facing an issue with a form that utilizes the GET method. I have an input named 'a' and when handling the request on the server side (using Node.js), I need to access req.body.a to search for 'a' in the database. However, it se ...

Creating a visual list in a React JS component with images and text

Hey there, I'm new to react js and I'm looking to create a list with images and text using html, css, and bootstrap. The list should include song images and have options for download and liking them after the user clicks on three dots. I've ...

Error: The typography-config in Angular 4.x is causing an invalid CSS issue in Sass

I'm looking to incorporate my custom fonts into my Angular 4.x project from the assets folder. I am also utilizing Angular Material for which I am defining custom typography in my styles.sass Below is the code snippet: @import '~@angular/materi ...

The challenge of resizing dialog elements in Angular Material

I am currently working on developing a text dialog for my app that will be reused frequently. The text dialog consists of a header, a message displayed above the text input, the text input area, and "Ok" and "Cancel" buttons. Upon my observation, I have f ...

What is the best way to create rounded edges for a spinning spinner using CSS?

Check out my fiddle link here! I managed to create a spinning spinner using CSS, however, I am struggling to round the edges of the black part that is spinning/moving. Can someone help me achieve this effect? .loader { position: relative; border: ...

Reiterating the text and determining the length of the string

Currently, the script is capable of calculating the width of the script based on user input and can also determine the width of a string. However, I am facing an issue when attempting to repeat a string entered by the user. For example, if the user input ...