I'm wondering why the text within a button gets overlapped when I insert a background image

New Update: After receiving help from Kodos Johnson, I have made some changes to my code. However, I am now facing an issue with the padding around the background image.

Upon trying to insert a background image into my button, the text inside the button ends up shifting outwards. Could someone assist me with this problem? Below is my code:

<div>           
  <button type="button" id="secondBarButton">See How It Works</button>
</div>

---Additional Update: I am looking to include padding or margin for the image.

#secondBarButton {
  float: right;
  padding: 5px;
  margin: 10px;
  background-image: url(images/button.png);
}

I am struggling to reposition the text back inside the button and align it centrally.

htmlcss

Answer №1

Don't bother with using a background image to display a simple icon. Opt for FontAwesome icons instead. The specific icon used on this button is:

fa-play-circle

SNIPPET

<!doctype html>
<html>

<head>
  <meta charset='utf-8'>
  <title>Button</title>
  <link href='https://cdn.jsdelivr.net/fontawesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'>
  <style>
    #btn1 {
      position: relative;
      width: 300px;
      height: 50px;
      border-radius: 25px;
      background-color: white;
      border: 1px solid #0070BA;
      font-weight: bold;
      font-size: 0.8em;
      color: #0070BA;
      line-height: 1;
      cursor: pointer;
    }
    .fa {
      position: absolute;
      left: 2px;
      top: -2px;
    }
    #btn1:hover {
      background-color: #0070BA;
      border: 1px solid #fff;
      color: #fff;
    }
  </style>
</head>

<body>

  <button id="btn1">
    <i class='fa fa-4x fa-play-circle'></i> See How It Works
  </button>


</body>

</html>

Answer №2

It would be beneficial to display the HTML code for better understanding. It appears that your image is causing a line break. Have you considered using columns to separate the image and text? This could potentially be a simple solution to rectify the issue.

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

Transforming a CSS class within a function into a dynamic jQuery animation

Looking to implement a css class toggling feature in jQuery within a function (shoutout to @Laurence for the code): function rocksType_shift(direction) { $('#rocksType_DBitems_container .before').removeClass('before')[direction](). ...

jqueryjquery-animatecss

How does using position: fixed affect width in React components?

Can someone explain why my sidebar width is reduced when I apply position: fixed? Here is the code snippet: https://codesandbox.io/s/1yr3nlqp74 Steps to reproduce the bug: Open the code in a new window (full screen) Observe the picture before and after ...

reactjscssreact-reduxmaterial-ui

What steps should I take to adjust the CSS code to properly integrate with my HTML file?

There seems to be an issue with the code provided. The CSS for the menu bar is not functioning properly with the HTML. <!DOCTYPE html> <html> <body class="news"> <head> <style type="text/css">body { margin: 0; paddi ...

htmlcss

Angular 2's subscribe method allows for actions to be taken in response to

There are two buttons, one of which is hidden and of type file. When the user clicks the first button, a confirmation dialog opens. Upon clicking "Ok" in the dialog, the second button should be clicked. The issue arises when all the logic in the subscribe ...

htmlangulartypescript

Exploring the usage of arrays within Angular 4 components. Identifying and addressing overlooked input

I'm struggling with array declaration and string interpolation in Angular 4 using TypeScript. When I define the following classes: export class MyArrayProperty { property1: string; property2: string; } export class MyComponent { @Input() object: ...

htmlarraysjsonangulartypescript

What is the best way to position a div at the bottom of a web page?

I have a question that may seem basic, but I've been struggling to find a solution. Despite searching for answers, none of the suggestions I've come across have worked for me. My application has two main containers - a header and a content div. T ...

cssangularjstwitter-bootstrap

Looking to incorporate Bootstrap Icons within Semantic UI?

I'm in need of assistance. My current project involves using Semantic UI, but there's a requirement to incorporate Bootstrap icons from . However, I'm facing difficulty copying the svg information directly into the code for the sake of reada ...

cssbootstrap-4iconssemantic-ui-css

Retrieve a targeted tag from the API snippet

I need to extract the IMG SRC tag from the given code: <pod title="Scientific name" scanner="Data" id="ScientificName:SpeciesData" position="200" error="false" numsubpods="1"> <subpod title=""> <plaintext>Canis lupus familiaris</plain ...

phphtmlimagetagssrc

What is the best way to create a website cover image with a set height and a width that expands?

Is there a way to have a cover image on a web page that expands in width as the screen size increases, but maintains a fixed height? I found a page with the desired effect that I want to replicate: Below is the link to my page where I want to implement t ...

htmlcss

PHP contact form malfunctioning

I've encountered an error with my PHP contact form code. Whenever I try to submit it, I receive the following message: " Parse error: syntax error, unexpected T_VARIABLE, expecting ')' in F:\wamp\www\peter harris\form.ph ...

phphtml

When I hover over div 1, I am attempting to conceal it and reveal div 2 in its place

I need help with a CSS issue involving hiding one div on mouse hover and showing another instead. I attempted to achieve this using pure CSS, but both divs end up hidden. Would jQuery be necessary for this task? Below is the CSS/HTML code I wrote: .r ...

javascripthtmljquerycss

How can the presence of a CSS rule prevent another from being applied?

My attempt to create this HTML file in Chrome posed some challenges: <style> br { }​ [required] { border-width: 3px; border-color: red; } </style> <input required /> The entire content of the file is shown above. However, I noti ...

htmlcssgoogle-chrome

Vue.js: click event does not trigger transform animation

I am facing a challenge with rotating an arrow icon within a dropdown menu. Despite my efforts, the rotation does not synchronize with the appearance of the dropdown menu. Here is the Vue component code snippet: <nav> <section class= ...

javascriptcssanimationvue.jsrotation

Invisible container unexpectedly blending into view

I have implemented a function for a login script. However, I am facing an issue where even if the result is not equal to "success", a div with the ID of status starts fading in regardless. This happens before logging in and redirecting. JS: *Just to note, ...

javascripthtml

Unable to extract content enclosed within the span tags

I am struggling to extract the text from the constantly changing span tag (568,789,073,292). The HTML snippet is provided below: Despite trying the following xpath code, I still can't retrieve the text. xpath=(//div[@id='RxValidPackets']/sp ...

pythonhtmlseleniumxpath

Create a div that pops up when clicked, just like the Fancybox jQuery feature

I'm looking to create a popup div with an elastic effect similar to jQuery's fancybox. I've tried using the following code, but it doesn't seem to work... Here is the HTML: <a href="#" id="LoginAnchorLink">ClickME</a> < ...

jqueryhtmlcssfancybox

Tips for centering the second content within a div block

<div style="height: 100%; background: red"> <div style="height: 100px; background: green"> </div> <div style="background: blue;"> <h1>Content</h1> </div> </di ...

htmlcss

Ways to personalize your profile picture input similar to Facebook

Trying to customize my profile picture like the Facebook update design, but encountering issues. I have an external bootstrap CSS file and want it to look like this image: https://i.sstatic.net/QbmIh.png HTML <div class="user-thumb user-thumb--edit ...

htmlcss

Shorten the content while preserving the HTML using JavaScript

When printing a string containing HTML links, I need to truncate the visible text while preserving the link structure. Simply using a substring method would disrupt the HTML tags in the string. I aim to display only 100 characters but also remove any inc ...

javascripthtmlsubstringtruncatesubstr

Using CSS for multiple background images can be achieved by including one image in a stylesheet and another image

Is it possible to have two background images using a combination of CSS and inline styling? #example1 { background-image: url(top.gif), url(bottom.gif); ... } For instance, one image may be dynamically defined within the element itself using an inlin ...

htmlcss