aligning a trio of button pieces to seamlessly merge in CSS

I have a total of 6 files that I need to work with. They are as follows:

button_01.png (left side of the button)

button_01-RO.png (rollover effect)

button_02.png (middle part of the button)

button_02-RO.png (rollover effect)

button_03.png (right side of the button)

button_03-RO.png (rollover effect)

Below are the links to the images, listed in the same order as above: https://i.sstatic.net/zunch.jpg https://i.sstatic.net/uTHAq.jpg https://i.sstatic.net/kkWuH.jpg https://i.sstatic.net/y0bhN.jpg

Here is the Fiddle link for reference: http://jsfiddle.net/gC2L3/

I am trying to implement the code below, but I am facing issues with aligning the left and right images properly. They are overlapping the text and not displaying correctly. This is a new challenge for me, and I have tried various solutions without success. I hope to find assistance here. I have already spent over 4 hours attempting different methods, but with no luck. I sincerely request help from the community. Thank you for any assistance provided. The code is almost there, but the left and right images are misaligned.

<style>
li.link-button {
float: left;
background: url('/opserv/assets/button_02.png') repeat-x;
}
.link-button a {
font-family: Arial;
color: White;
text-decoration: none;
background: url('/opserv/assets/button_01.png') left no-repeat;
}
.link-button span {
padding-left: 8px;
padding-right: 8px;
background: url('/opserv/assets/button_03.png') right no-repeat;
}
li.link-button:hover {
float: left;
background: url('/opserv/assets/button_02-RO.png') repeat-x;
}
.link-button:hover a {
font-family: Arial;
color: White;
text-decoration: none;
background: url('/opserv/assets/button_01-RO.png') left no-repeat;
}
.link-button:hover span {
padding-left: 8px;
padding-right: 8px;
background: url('/opserv/assets/button_03-RO.png') right no-repeat;
}
</style>

<ul>
<li class="link-button">
<a href="#"><span>Press Me</span></a>
</li>
</ul>
cssbuttonimagebutton

Answer №2

After conducting further investigation, I managed to uncover the solution. With any luck, this information will be beneficial to someone down the road. Keep in mind that adjusting the height and width is essential to suit your images.

.custom-selector{
color: white;
position: relative;
height: 24px;
text-decoration: none;
margin: 0 11px;
border: 0;
background: url('Center.png') repeat-x;
}
.custom-selector::before,
.custom-selector::after {
content: ' ';
position: absolute;
top: 0;
width: 11px;
height: 24px;
}
.custom-selector::before {
left: -11px;
background: url('Left.png') left no-repeat;
}
.custom-selector::after {
right: -11px;
background: url('Right.png') right no-repeat;
}

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

Transitioning with an ellipsis

Currently, I am working on a project where I am trying to utilize the CSS property text-overflow: ellipsis to achieve a specific animation. However, despite applying this property along with white-space: nowrap and overflow: hidden to .card-dish__info, I a ...

htmlcssoverflowellipsis

Apply CSS to give each line of text a box shadow effect

My CSS notebook creation featuring box-shadow and margin can be viewed here: JSFiddle The issue I'm facing is that when a line break occurs, the notebook row expands, causing it to lose its notebook-like appearance. Is there a way to ensure each line ...

cssword-wrap

How can I create a parent div with cursor-pointer and apply inline styling to make all child elements

Is there a way to apply the cursor-pointer style to an entire div with inline CSS without it affecting just the white space around the child elements? I have tried using position and z-index without success. I am unable to use an external stylesheet for t ...

javascripthtmlcssinline

Providing a BR tag with a distinctive on-screen look (prior to the break happening)

After coming across this particular inquiry, I discovered that in the past, styling the line break (BR) tag with CSS was not possible. Nevertheless, thanks to the latest browsers, this limitation is a thing of the past now. My aim is to give certain line b ...

htmlcss

Yeoman webapp error: Issue with incorrect CSS path in subfolder

I have been using the yeoman webapp generator (0.5.0) and my app directory is structured like this: app/ ├── dir1 │ └── index.html ├── favicon.ico ├── images ├── index.html ├── robots.txt ├── scripts │ └ ...

htmlcssweb-applicationsgruntjsyeoman

Contrasts between space and the greater than selector

Can you explain the distinction between selector 6 and selector 7 as outlined on the w3 website? Inquiring minds want to know. ...

htmlcss

Manipulate classes for buttons in a React component by adding or removing them

I'm attempting to create two buttons that will toggle their class when clicked. When button one is clicked, it should add the "active" class to itself and remove the "active" class from the sibling button. I've made some progress, but I'm e ...

htmlcssnode.jsreactjs

Retrieve the current font style with Kendo UI Editor

Recently, I've been facing some challenges while working with the Kendo UI Editor. Specifically, I'm struggling to retrieve the current font style. My goal is to use JavaScript or jQuery to obtain the following values: Values I am looking for: ...

javascriptjquerycsskendo-ui

How can we add a class to a radio button using jQuery when it is checked, and remove the class when it

I'm looking for help with using jQuery to toggle between two radio buttons and display different divs based on the selection. jQuery(document).ready(function($) { if ($('#user_personal').is(':checked')) { $('.user_co ...

javascriptjqueryhtmlcss

Utilizing Jquery to Add Elements and Adjust Element Height

Encountering an unusual issue where the height of a div is not updating when content is appended to it using JQuery. To demonstrate the problem, I have created a simple JSFiddle: http://jsfiddle.net/hf66v/5/ Here is the initial HTML structure: <div i ...

jqueryhtmlcss

Incorporate a background image property using Jquery

Can anyone help me with adding the css background-image:url("xxxxx") property to my code? jQuery('#'+$trackID+' .sc_thumb').attr('src',$thumb_url); jQuery('#'+$trackID+' .sc_container').css('display& ...

javascriptjquerycss

Whenever I press a button, my card holder gradually slides downwards

I'm facing an issue with my code and I'm unsure whether it's related to CSS or JavaScript. Whenever I click the button on my page, my card-container2 moves downward unexpectedly. Here is the snippet of my code: HTML: <div class="car ...

javascripthtmlcss

How to ensure two unordered lists are aligned at the same baseline using CSS

Is it possible to align two UL's to a single baseline, with one UL aligned flush left and the other flush right? Currently, the UL's are not aligned and appear like this: How can I make sure the two UL's share the same baseline? CSS #foo ...

csshtmlalignmenthtml-lists

Make sure the image is aligned in line with the unordered list

I've been having trouble trying to display an image inline with an unordered list. Here's the HTML code: <div class="customer-indiv man"> <a class="customer_thumb" href="/fan/332profile.com"> <img src="http://i.imgur.com/Wi ...

htmlcss

Ensure that only one button from the collection is activated

One of the features on my website includes 3 blocks with buttons. These buttons trigger a change in the displayed picture when clicked. However, it is crucial to ensure that when a new track is activated, the previous button returns to its original state. ...

javascripthtmlcssbutton

AngularJS is designed to provide alternating colors specifically for the objects that are currently visible within the complete set

Within my angularjs application, I am working with the following JSON data: $scope.itemsList = { "busName": "ABC", "needsToHide": true, "num": 123 }, { "busName": "xyz", "needsToHide": false, "num": 567 ...

cssangularjsangularjs-ng-repeatng-classangularjs-ng-class

Ways to Resolve Issues with WordPress Update and Publish Failures

It has been quite some time since Gutenberg was introduced to us, and it seems like we all have a complicated relationship with it. Navigating the Block editor to create a post or page can be challenging, especially when it used to be so simple. But what& ...

phphtmlcsssqlwordpress

Troubleshooting: CSS causing images to not show up on

Struggling with a CSS issue, I can't seem to solve it. My images are not showing up on the webpage even though the URLs are correct and the HTML is properly written. There is no specific styling applied to the images, and the only styling for the ima ...

htmlcssimage

Obtaining the accurate offsetTop and offsetLeft values for an element following a CSS3 rotation

Is there a method to accurately determine the offsetTop and offsetLeft values of an element post-transform rotation? Are there any lesser-known element properties that could be helpful in this scenario? Attached is an image that can provide further clari ...

javascriptcss

Steps for accessing an image from the static folder in a Python-Django application

I am currently working on a portfolio website project where I am using html, css, js, and django. However, I am facing an issue with loading an image from the assets folder within the static directory. Here is a snippet of the template code causing the pr ...

cssdjangodjango-templatesdjango-staticfiles