Center alignment of text and images within the button's image

Can someone help me format my CSS properly? I have a button image where the text should be on the left side and another image on the right side. Currently, everything is centered. Thank you in advance.

Here is the current code:

button {
  /* padding-top: 100px; */
  width: 100%;
  border: none;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("https://www.searchpng.com/wp-content/uploads/2019/01/Game-Button-PNG-copy.jpg");
  height: 100%;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Static Template</title>
</head>

<body>
  <button type="button">
          <span>test</span>
          <img
            src="https://cdn.iconscout.com/icon/free/png-256/metamask-2728406-2261817.png" width="60"
          />
        </button>
</body>

</html>

htmlcss

Answer №1

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Custom HTML Template</title>
    <style>
      button {
        /* padding-top: 100px; */
        width: 100%;
        border: none;
        background-position: center;
        background-repeat: no-repeat;
        background-image: url("https://www.searchpng.com/wp-content/uploads/2019/01/Game-Button-PNG-copy.jpg");
        height: 100%;
        max-width: 1400px;
        margin: 0 auto;
        position: relative;
      }
     button span {
    text-align: left;
    position: absolute;
    left: 20%;
    color: white;
    top: 29px;
}
button img{position: relative;
    right: -28%;}
    </style>
  </head>
  <body>
        <button type="button">
          <span>New Test</span>
          <img
            src="https://cdn.iconscout.com/icon/free/png-256/metamask-2728406-2261817.png"
            width="60"
          />
        </button>
    
  </body>
</html>

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

Guide on redirecting to a different URL when the query string contains a particular keyword

Currently, I am facing an issue with the code below that is used for redirection based on URL string matching. The error message "Warning: Use of undefined constant" is being thrown and the code fails to work if the string is case sensitive. Can anyone a ...

phphtmlstring

Concealing the pathway to a background image

Currently, I have a large grid made up of divs that display different sections of an image. By using background-image and background-position, I am able to showcase parts of the image. However, one issue is that users can easily view the complete image by ...

phpjavascriptcss.htaccess

What significance do the blank quotes hold in terms of value?

Is it possible to enter multiple values for the "favoriteCities" field since the value is empty? <input name="favoriteCities[]" value=""/> ...

html

Discovering a particular string within a jQuery array object: Tips and tricks

One thing that is confusing me is the jQuery array object. To explain further: I have two arrays, one called brandsLink and the other called floorLink. When a user clicks on a link, I am saving the brand name in a variable called brandName, and then checki ...

javascriptjqueryhtmlcss

What is the best way to align an image with the background of a div element?

Currently, I am attempting to create a page header that includes an image. To achieve this, I am using a div: <div id = "header"> </div> To set the background image of the div, I have added the following CSS: #header{ background-image: u ...

htmlcssimage

How to convey emotions through Material UI MenuProps to customize paper root classes

Utilizing Material UI for a Select menu along with Emotion for custom styling. I am facing a challenge where I need to customize the root classes (MuiPaper-root or MuiMenu-paper) of the menu popover once a menu item inside the Select menu is clicked. Inc ...

cssreactjsmaterial-uiemotion

Discover the job specifications pages on Dice.Com by utilizing C programming language

I have taken on a student project involving web scraping job postings from Dice.Com for analysis. My main focus is on extracting the job description, but I am struggling to figure out how to access it. With limited knowledge in HTML and C#, I find it dif ...

c#htmlseleniumweb-scrapinghtml-agility-pack

Instructions on implementing getJSON in this code

I recently set up a chained select box with JSON data to populate options, using this Fiddle. While the data is hardcoded for now, I am looking to load it using the $.getJSON() method. However, despite my efforts, I haven't been able to get the code r ...

javascriptjqueryhtmljsongetjson

What is the best way to eliminate extra space at the bottom of glide.js?

Looking for assistance to eliminate the whitespace at the bottom of an image or slider. Can anyone help? Here is a preview of the image: https://i.stack.imgur.com/mEYY3.png If you'd like to take a look, here is the project code link: I had to down ...

javascripthtmlcssglidejs

Unable to implement CSS styling on Bootstrap collapsible menu

When you visit this website and resize the browser window to reveal the toggle buttons, clicking on either one will only expand the dropdowns to a small portion of the screen width. I would like both dropdowns to stretch out and fill 100% of the available ...

jqueryhtmlcsstwitter-bootstrap-3

What is the best way to link buttons to specific drop down sections?

How can I create multiple drop down divs with different content for each button click? JSFiddle: http://jsfiddle.net/maddiwu/xe6xtfqh/ .slide { overflow-y: hidden; max-width: 100%; overflow-x: hidden; max-height: 100vw; /* approximate ...

javascripthtmlcss

Invoke the designated JavaScript function within a subordinate <frame>

Below is an example of the standard HTML structure for a parent page named "index.html": <html> <head> <title>test title</title> </head> <frameset cols="150,*"> <frame name="left" src="testleft.html"> ...

c#javascripthtmldom

Arranging fixed-width <div>s in rows of four for a sequential display

Below is the code that I am working with: <div style="margin: 0 auto; display:block; width: 916px; overflow: auto;"> <?php echo ""; echo "<i>Owned: $line->phone </i><br><br>"; $query ...

phpcsssql

I prefer the jumbotron to be uninterrupted by the navbar

I'm facing an issue where my jumbotron is ending up under the navbar, but I want to position it just below with some padding in between. Here's the code snippet: Take a look at the current appearance here: This is how it looks like ...

htmlcssnavbar

Struggling to find the right alignment for my Bootstrap card design

I'm attempting to center a card in the middle of the screen. While I was able to horizontally center it using mx-auto, I'm facing difficulties with vertical centering. I tried using mt-3 to add margin-top to the card, but it only gives me about ...

htmlbootstrap-5

Steps for properly inserting a hyperlink:

I'm in need of assistance. I have a grid containing several images that I want to make clickable by adding anchor tags, but when I do this, the images seem to disappear completely. I suspect there's an issue with them being inside the container d ...

htmlcss

The function .click() fails to execute upon page load, yet it functions successfully when utilized in the console

This is the code I am using: <script> document.getElementById("test").click(); </script> When I try to trigger the click(); function on page load, it doesn't work. However, when I execute it in the console on Firefox, it works ...

javascripthtmljquerycssjquery-events

Overlapping Dropdown Javascript Menus

To achieve the desired effect in the header, I need to create two expandable dropdown menus for the first two titles. My coding experience is limited, especially when it comes to javascript and jquery. Currently, I have managed to create the effect for one ...

javascriptjqueryhtmlcss

I am having an issue with a mobile JQuery collapsible div that is not properly displaying the internal div within the item

Mobile JQuery jquery.mobile-1.0rc2.min.js HTML 5 Asp.net 4.0 I am having trouble with a gridview item-template where I have implemented the collapsible div from JQuery Mobile. The label text within the h3 element can be quite long, and I want to clip it i ...

gridviewhtmljquery-mobileitemtemplate

What is the method to integrate PHP with HTML code?

Apologies if this question has been asked before, but I have not found anyone with the same query as mine. I am new to HTML and PHP, and I am looking to enhance my skills by creating a registration form and storing all the data in a MySQL database using XA ...

phphtmlajax