Tips for incorporating an image into a personalized CSS button

Question

Tips for incorporating an image into a personalized CSS button

Here is the button HTML code snippet I am working with:

<button class="button" style="width: 95%;">PHYSICIANS</button>

I have customized it using CSS3 as shown below:

button {
    border: 1px solid rgba(0,0,0,0.3);
    background: #eee;
    color: #515151;
    font-size: 24px;
    font-weight: 700;
    padding: 21px 34px;
    text-decoration: none;
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0.21, rgb(203,203,203)), color-stop(0.58, rgb(227,226,226)));
    background: -moz-linear-gradient(center bottom, rgb(203,203,203) 21%, rgb(227,226,226) 58%);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0 0 0 5px rgba(255,255,255,0.3) /* glass edge */, inset 0 1px 0 0 rgba(255,255,255,0.5) /* top highlight */, inset 0 -3px 0 0 rgba(0,0,0,0.5) /* bottom shadow */;
    -webkit-box-shadow: 0 0 0 5px rgba(255,255,255,0.3), inset 0 1px 0 0 rgba(255,255,255,0.5), inset 0 -3px 0 0 rgba(0,0,0,0.5);
    box-shadow: 0 0 0 5px rgba(255,255,255,0.3), inset 0 1px 0 0 rgba(255,255,255,0.5), inset 0 -3px 0 0 rgba(0,0,0,0.5);
    text-shadow: 0 1px rgba(255,255,255,0.6);
}
button::-moz-focus-inner, a.button::-moz-focus-inner {
    padding:0;
    border:0;
}
button:hover, a.button:hover {
    background: #cbcbcb;
    cursor: pointer;
}
button:active, a.button:active {
    background: #ccc;
    padding: 22px 34px 20px;
    -moz-box-shadow: 0 0 0 5px rgba(255,255,255,0.3), inset 0 -1px 0 0 rgba(255,255,255,0.5), inset 0 2px 5px 0 rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 0 0 5px rgba(255,255,255,0.3), inset 0 -1px 0 0 rgba(255,255,255,0.5), inset 0 2px 5px 0 rgba(0,0,0,0.2);
    box-shadow: 0 0 0 5px rgba(255,255,255,0.3), inset 0 -1px 0 0 rgba(255,255,255,0.5), inset 0 2px 5px 0 rgba(0,0,0,0.2);
    text-shadow: none;
}

This CSS styling results in the button displayed below:

I am now looking to enhance this button by adding a thumbnail image to it, similar to the example below:

The original image size is 260X190, but I aim to resize it to fit well within the button boundaries.

html css

Answer 1

Answer №1

If you want to achieve this, you can utilize the pseudo-element :before.

To see a demonstration of how it works, feel free to check out the example I created: http://jsfiddle.net/A7UsX/1/

button:before {
    content: " ";
    display: inline-block;
    background: url("http://www.wdc.com/Global/images/icons/icon_supporthelp.gif") no-repeat;
    height: 30px;
    width: 50px;
}

I have set a red background in my demo to visually illustrate the process. You can modify the background with your desired image and adjust the height and width values according to your preferences.

Answer 2

If you want to achieve this, you can utilize the pseudo-element :before.

To see a demonstration of how it works, feel free to check out the example I created: http://jsfiddle.net/A7UsX/1/

button:before {
    content: " ";
    display: inline-block;
    background: url("http://www.wdc.com/Global/images/icons/icon_supporthelp.gif") no-repeat;
    height: 30px;
    width: 50px;
}

I have set a red background in my demo to visually illustrate the process. You can modify the background with your desired image and adjust the height and width values according to your preferences.

Answer 3

Answer №2

If you want to add an image before a button, you could utilize the :before pseudo element.

button:before{content: ' '; display:inline-block;  position:absolute; content:url(http://lorempixel.com/25/25); }

Instead of using jpg or png format, it is recommended to use a SVG image. You can achieve this by calling the image with background-image and specifying its positioning.

button:before { content:''; display:inline-block; height:1em; width:1em; 
background-image:url('images/image.svg'); background-size:contain; background-repeat:no-repeat;  }

To see a demonstration of this in action, you can view the working Demo here: http://jsbin.com/damujidi/1/edit

Answer 4

If you want to add an image before a button, you could utilize the :before pseudo element.

button:before{content: ' '; display:inline-block;  position:absolute; content:url(http://lorempixel.com/25/25); }

Instead of using jpg or png format, it is recommended to use a SVG image. You can achieve this by calling the image with background-image and specifying its positioning.

button:before { content:''; display:inline-block; height:1em; width:1em; 
background-image:url('images/image.svg'); background-size:contain; background-repeat:no-repeat;  }

To see a demonstration of this in action, you can view the working Demo here: http://jsbin.com/damujidi/1/edit

Answer 5

Answer №3

If you want to include an <i> element, which is commonly used in bootstrap, you can do so by following this code snippet [ref1] [ref2].

<button class="button">
    <i class="btnbg"></i>PHYSICIANS
</button>

This is the corresponding CSS:

.btnbg {
    background-image: url('https://i.sstatic.net/QgIOj.png');
    background-position: bottom left;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    height: 35px;
    line-height: 35px;
    vertical-align: middle;
    width: 70px;
}

.button {
    line-height: 35px;
    vertical-align: middle;
}

For a visual demonstration, check out this jsFiddle link.

Answer 6

If you want to include an <i> element, which is commonly used in bootstrap, you can do so by following this code snippet [ref1] [ref2].

<button class="button">
    <i class="btnbg"></i>PHYSICIANS
</button>

This is the corresponding CSS:

.btnbg {
    background-image: url('https://i.sstatic.net/QgIOj.png');
    background-position: bottom left;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    height: 35px;
    line-height: 35px;
    vertical-align: middle;
    width: 70px;
}

.button {
    line-height: 35px;
    vertical-align: middle;
}

For a visual demonstration, check out this jsFiddle link.

Tips for incorporating an image into a personalized CSS button

Answer №1

Answer №2

Answer №3

Similar questions

Creating a circular array of raycast directions with HTML Canvas 2D

Save the outcomes of the response in variables

After implementing jQuery, media queries may not function as intended

arranging a set of items alongside a corresponding tag

Different time parameter for setting a timeout in Javascript

Generate a line chart adorned with dots and customized labels utilizing a pair of distinct data sets

Arranging an image in a specific location relative to its dimensions

Understanding the Importance of CSS Specificity in Resolving Selector Conflicts

Keep the table header in place while scrolling

Dynamic parallax or stacked vertical text animation

What are the best ways to stop jQuery events from propagating to ancestor elements?

Utilizing jQuery time intervals within a jQuery click event: A step-by-step guide

Animating toggled classes in React can be achieved by utilizing keyframe animations or

Use JavaScript to swap out various HTML content in order to translate the page

Automatically adapt the height of a bootstrap button based on the dimensions of other bootstrap buttons

Disappearing Bootstrap 3 Dropdown Issue Caused by Tab Click

The lower section of the scrollbar is not visible

What is the best way to align two spans vertically on either side of a div, in relation to the div itself?

The issue I'm facing involves Materialize CSS interfering with the rendering of input fields from PrimeNG. Does anyone have a solution to resolve

Matching text within a div using jQuery and HTML