Place a picture and words within a submit button

I need assistance with aligning text and a small airplane image on a submit button. Currently, the text is overlapping the image and I am unsure how to fix this issue. How can I adjust the position of the text to display to the right of the button? Is there a more efficient way to achieve this? Thank you.

input[type="submit"] {
    width: 230px;
    height: 40px;
    border: none;
    background: url(../Images/Plane.png) #ff9900 no-repeat right;
    color: #fff;
    cursor: pointer;
}

Here is the HTML code:

<input type="submit" value="SEND" id="submitForm">
htmlcss

Answer №1

To ensure proper alignment, include the following attribute in your code:

text-align:right;

Answer №2

Someone else has asked a similar question... HTML: How to create a submit button with both text and an image?

The key point is that the image should be placed within an image tag instead of a background tag, as this can affect the positioning of the text and image. Consider changing the background image to an image tag inside the button, as having the image as a separate background element from the text may not be the most logical choice.

Answer №3

Instead of juggling the balance between padding and alignment, consider utilizing a <button> element that can execute button-like functions and enclose other (non-interactive) HTML elements:

<button type="submit" id="submitForm">
     <img src="../Images/Plane.png" /> Send
</button>

Using the following CSS styling:

#submitForm {
    width: 230px;
    height: 40px;
    border: none;
    background-color: #ff9900;
    color: #fff;
    cursor: pointer;
    text-transform: uppercase;
}

#submitForm img {
    float: right;
}

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

Show the image on top of the div block as the AJAX content loads

Implementing this task may seem easy and common, but I am struggling to figure it out! What should take five minutes has turned into an hour of frustration. Please lend me your expertise in getting this done. I have a div container block: <div cla ...

javascriptjqueryhtmlcssajax

challenges surrounding the use of getElementByTagName

Within my webpage, I have implemented two select elements, both containing multiple options. However, I am facing an issue where I can only access the options from the first select box using getElementByTagName("options"), and unable to retrieve the option ...

javascriptjqueryhtmltagsgetelementsbytagname

How can I redirect a Spotify API request to save data directly to my local filesystem

I am developing a program for personal use that utilizes Spotify's API. My intention is not to make this software public, but rather to access and analyze my own playlist data. However, I am facing an issue with Spotify's authentication process. ...

htmlhttp-redirectspotify

Tips for concealing scrolled material beneath a stationary see-through banner

After searching through various questions on the topic, I have not found a working solution. My goal is to hide the body content beneath a transparent fixed header when scrolled. Take a look at my current setup here: https://jsfiddle.net/nukuf23L/ If pos ...

cssscrollfixedtransparent

"Need help solving the issue of generating a random number for a Firebase DB column after adding a new user

Whenever I add a new user using JavaScript, it generates a random number below the Admins column like this. However, I want to adjust this so that it appears as shown in these tables, displaying the username value. If anyone can help me modify the code acc ...

javascripthtmljsonfirebasefirebase-realtime-database

Adjust the height of the drawer in material-ui

In my current project using react and material-ui, I am facing a simple issue that has me stumped. I am trying to create a drawer with a specific height so that it does not overlap the app bar when opened. Unfortunately, there is no built-in parameter in ...

cssreactjsmaterial-ui

Ensure that the main div remains centered on the page even when the window size is adjusted

Here is the code snippet: <div id="root"> <div id="child1">xxxx</div> <div id="child2">yyyy</div> </div> CSS : #root{ width: 86%; margin: 0 auto; } #root div { width: 50%; float: left; border: ...

javascriptjqueryhtmlcss

Conceal div elements containing identical information by utilizing jQuery

I'm dealing with a webpage that pulls in a long section of divs from another application. Unfortunately, I can't filter the divs before they appear, but I urgently need to hide any duplicate data within certain values using jQuery. The duplicate ...

javascriptjqueryhtmlcssduplicates

Having difficulty aligning ListItem to the right within a List

I am working with an array that contains objects which I need to display in ListItems of a List. My goal is to show these ListItems from the array Objects in a layout where odd numbers are on the left and even numbers are on the right. However, I am facing ...

javascriptcssreactjsmaterial-ui

Ways to evenly distribute children in a row using CSS

https://i.stack.imgur.com/HmziN.png The image above showcases the desired effect I am aiming for. It is important to note that the width of the container div may vary. The child elements should have consistent spacing between each other as well as the le ...

css

Positioning CSS for a Responsive Button

Currently, I am working on making my modal responsive. However, I am encountering an issue with the positioning of the "SAVE" button. The button is not staying in the desired position but instead disappears. Below is the snippet of my HTML and CSS: .dele ...

javascripthtmlcssangular

Combine lists with floating elements positioned to the left or right

My HTML includes the following ul tag: <ul style="position:absolute"> <li>list 1</li> <li>list 2</li> <li>list 3</li> <li> list 4 <p>list 4 content goes here</p> ...

htmlcss

Organize objects neatly in a grid formation

I have a .test div with grid-template-columns: auto auto auto;. The column width is set to vary based on the element width, and I also used justify-content: start; to align the columns to the left. I chose to use auto instead of 1fr to prevent the columns ...

css

The back-to-top button guides users back to their last visited page

I'm excited to explore AngularJS and I want to add two "return to top" buttons on different pages. Here's what I have so far: Page 1: <h1 id = "top"> .......... <a href="#top" target = "_self">Return to Top</a> Page ...

javascripthtmlangularjsangularjs-scopehref

Activate hover effect on toggle button

When I hover over the "CHANGE" button, the orange color appears as expected. Clicking the button once turns the color red but removes the hover color, which is fine. However, clicking it twice brings back the original blue color but the hover effect is m ...

htmljavascriptcssjquery

Is there a way to use jQuery to focus the cursor on a specific field in a form?

In my form, the first field is a dropdown with options such as "student" and "employee". Below that, there are two text fields for "college name" and "company name". If a person selects "student", then the "college name" text box should be enabled and t ...

jqueryhtmlcursor

Transmit information to a different JavaScript framework using Vue

Utilizing Vue, I create a JSON file using classic ASP from SQL Server and import the data. My objective is to showcase the received data on the page and in ApexCharts. The structure of the HTML page, getData.js, and the JSON from dataSql.asp is outlined b ...

htmlvue.jsrenderapexcharts

What is the best way to create CSS rules that can be dynamically applied as classes using JavaScript?

I have been attempting to use the addClass function in JavaScript to add a class, but I am struggling to make it work. Is there a specific way to define a class that will be added to an element when clicked on? Here is what I have attempted: var input = ...

javascriptjqueryhtmlcss

The absence of CSV may be attributed to a reference error

I'm new to all of this, so I believe it's a simple mistake on my end, but I can't seem to get it to work. After deploying the code below and clicking on the button, nothing happens. When I inspect the html in my browser, I see an error mess ...

javascripthtmljsoncsvgoogle-apps-script

Steps to eliminate the select all checkbox from mui data grid header

Is there a way to remove the Select All checkbox that appears at the top of the checkbox data column in my table? checkboxSelection The checkboxSelection feature adds checkboxes for every row, including the Select All checkbox in the header. How can I ...

javascriptcssreactjsmaterial-uidatagrid