How to perfectly align an image within a button using CSS

I need help creating a button with an image using the following code:

.btnWo {
    position: relative;
    outline: none;
    border: none;
    height: 150px;
    width: 400px;
    border-radius: 10px;
    color: #FFF;
}

.btnWo img {
    height: 150px;
    width: 400px;
    border-radius: 10px;
    object-fit: cover;
}

.button-text {
    position: absolute;
    margin-right: 25px;
    bottom: 25%;
    width: 100%;
    right: 0%;
    text-align: right;
}

.button-text2 {
    bottom: 10%;
}
<div class="wo-img">
  <button id="btnWo" class="btnWo">
    <img src="https://i.postimg.cc/XNKnzLR0/woBg1.jpg">
    <span id="woName" class="button-text">Name</span>
    <span id="woTime" class="button-text button-text2">Time</span>
  </button>
</div>

However, I'm facing an issue where the image is not fully covering the button as desired. I tried solutions involving padding and transforming but it didn't solve the problem. Any suggestions on how to achieve this?

htmlcss

Answer №1

When working with buttons (and other elements), it's important to consider the default padding that may cause elements to appear shifted.

To fix this issue, simply add:

.btnWo {
    padding: 0;
}

One effective technique used by developers is to reset all default values of elements to zero at the beginning of the stylesheet. This approach can help prevent layout problems like the one you're experiencing.

* {
    padding: 0;
    margin: 0;
    border: 0;
}

Answer №2

Would you consider changing the <img> tag to set the background of the button? If so, this code may be helpful:

.btnImg {
    position: relative;
    outline: none;
    border: none;
    height: 150px;
    width: 400px;
    border-radius: 10px;
    background: url("https://i.postimg.cc/XNKnzLR0/woBg1.jpg");
    background-size: contain;
    color: #FFF;
}

.button-text {
    position: absolute;
    margin-right: 25px;
    bottom: 25%;
    width: 100%;
    right: 0%;
    text-align: right;
}

.button-text2 {
    bottom: 10%;
}
<div class="img-btn">
  <button id="btnImg" class="btnImg">
    <span id="imgName" class="button-text">Name</span>
    <span id="imgTime" class="button-text button-text2">Time</span>
  </button>
</div>

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

CSS animation fails to execute after a class is removed

I'm attempting to smoothly open and close my navigation menu. When the toggle button is clicked, the .responsive class is either added or removed from the .topnav and .links elements. My code currently works for the .topnav element, using a heigh ...

csscss-transitions

Adjusting image size to accommodate responsive column cell using CSS

I've been working on optimizing my mobile website using a responsive column layout. The challenge I'm facing is getting the images within each column to stretch to 100% width while automatically adjusting their height. I experimented with settin ...

htmlcss

A guide on sending a React component as a parameter to an HTML input element

Is it possible to pass a React component as an attribute to an HTML input? class Test extends React.Component { render() { return "test"; } } function App() { return ( <input type="text" value={<Test />} /> ) } The issue I ...

htmlreactjs

The issue of 'on click event' not functioning in jQuery-ajax

I am currently trying to implement ajax for loading specific pages, but unfortunately, the 'on-click' event is not functioning as expected. I have created an init() function that auto-loads one of the pages when the page is loaded initially, and ...

javascriptphpjqueryhtmlajax

Find the exact length of a string in an HTML5 canvas

In my HTML5 canvas project, I am overlaying text on an image (creating a meme generator). My goal is to determine the perfect font size so that the text covers the entire width of the canvas. Is there a JavaScript solution to calculate the ideal font size ...

javascripthtmltextcanvasfonts

Tips on incorporating form groups within a grid using semantic-ui-react

I am currently developing a project using semantic-ui-react that involves numerous input fields. To better organize the page, I have decided to split it into 3 columns. Below is the approach I have taken: render() { return ( <Form> < ...

cssreactjsreduxredux-formsemantic-ui-react

Adjusting the height of one div to match the height of another div

I am facing a challenge in making a div (overlay) float over 3 other divs. It slightly overlaps the 1st (horsebanner) and 3rd (footer) divs while completely covering the 2nd (midbackground). My goal is to make the 2nd div automatically expand as the floati ...

jquerycsshtml

Building a Vuetify footer with perfectly centered content: A step-by-step guide

I currently have a setup where I am using the v-flex with a grid ratio of 2 / 8 / 2. This places my content in the center of the section with a width of 8, but the issue is that this centered content does not match up with the other elements on the website ...

htmlcssvue.jsvuetify.js

Utilizing form values in a PHP function: a brief guide

Seeking guidance as a newcomer to PHP - I recently created an auto-complete text box using PHP, along with a submit button. However, I neglected to provide a form action. Below is the HTML form code that was used for the autocomplete textbox. This particu ...

phpmysqlhtml

Can you use logical AND in Selenium XPath to combine multiple contains() filters?

My objective is to identify a specific element using Selenium: <a class="ABC" href="#" data-test-id="XXX|YYY|ZZZ"> There are various elements on the page with attributes matching "ABC", "XXX", " ...

pythonhtmlxmlseleniumxpath

What is the reason behind only being able to toggle half of the element's classes?

My current project involves using jQuery's .toggleClass() function to implement a favorite button within multiple <div> elements, each containing an <a> element and an <i> element. I am toggling between two Font Awesome icons by swit ...

javascriptphpjqueryhtmlfont-awesome

The final item in the navigation bar is off-center

After centering all text within the li tags, the last one appears to be slightly closer to the bottom. Below is the code snippet along with an image: *{ margin:0; padding:0; box-sizing:border-box} #hamburgerClick{ displa ...

css

How to align two columns in the center using Bootstrap 4

Help Needed with Centering Two Columns in Bootstrap I am facing an issue with centering two columns in Bootstrap. In Bootstrap 3, I used push and pull classes to achieve this, but in Bootstrap 4 it seems different and I can't seem to figure it out. ...

htmltwitter-bootstrapbootstrap-4

Creating responsive designs using MDBootstrap 4

Currently, I am utilizing mdbootstrap4 to develop a prototype user interface for a web application. My main objective is to make the login container adapt its size as the screen width changes. I want it to scale up when the screen widens and adjust to mob ...

htmlcssbootstrap-4mdbootstrap

Arrange grid column elements (similar to aligning with justify: flex-start)

<item> <h2 class='title'> TITLE </h2> <video-item> <img src="https://placehold.it/1600x1100"> </video-item> <overview> <p>CONTENT</p> < ...

csscss-grid

Enhancing the efficiency of a JavaScript smooth scrolling feature for numerous listed items

I have been experimenting with recreating the recent Apple Mac retrospective using only CSS and JavaScript to create a small timeline of projects. While I have successfully implemented the layout for the full-screen hero and the expand-on-hover effect, I a ...

javascripthtmlcssperformancescroll

ChessboardJs: JavaScript Boards Function Properly on Initial Use Only

Update: The page code can be accessed via my page URL. I'm unsure where the issue lies. Your assistance is appreciated. Issue: Initially, when clicking on the chess puzzles page, everything works fine. However, upon re-clicking from the homepage, th ...

javascriptjqueryhtmlcss

Achieving Horizontal Alignment of Tab Labels and Icons in Material-UI with Tabs API

I am currently attempting to customize the Material UI CSS in order to align both the phone icon and text on the same line and closer together. After doing some research, I stumbled upon the Tabs API which seemed promising. Upon further inspection, I disc ...

javascripthtmlcssreactjsmaterial-ui

Enhance mix-blend mode or filtering effects in SCSS using an SVG component in VueJS

I am currently developing a fixed navbar at the top of a webpage with several SVGs inside anchor tags. I want the SVGs to appear black when displayed over lighter colored divs (other Vue components) and white when displayed over darker colored ones. The ba ...

cssvue.jssassresponsivemix-blend-mode

Fade-In and Fade-Out CSS Effect with Background Images Displaying a Blank Last Image

I've been experimenting with applying a CSS-only background image transition to a div, but I encountered an issue where after cycling through three specified images, the background reverts back to the original black color. Even stranger, when I adjust ...

htmlcss