Typically, buttons are created with specific dimensions like this:
<button style="width: 120px; height: 40px;">
Mememe
<button>
Afterwards, a background is added that matches the size of the button:
button
{
background-size: 100% 100%;
}
If you want it to be a perfect square, the image should also be 120x40 px.
Is there a way to make the button the same size as the image without using IMG elements or scripts?
Best Regards,
It is not feasible to achieve this using solely HTML and CSS. However, it can be achieved with the help of PHP (or another server-side scripting language) or JavaScript.
To dynamically adjust your button size based on the loaded image, you can utilize JavaScript to determine the dimensions of the image and update the button style accordingly:
let img = document.images[0];
let width = img.width;
let height = img.height;
let button = document.getElementById('button-id');
button.style.width = `${width}px`;
button.style.height = `${height}px`;
My webpage contains multiple content tabs with expand/collapse icons in each panel. To simplify the process of closing all expanded sections, I have included buttons for expanding and collapsing all panels at once. While this feature is functioning correc ...
Is there a way to extract column names from a MySQL database? I have been able to retrieve column names using the following code: Array ( [id] => id [BSPKey] => BSPKey [PrintPost] => PrintPost [Barcode] => Barcode [FirstName] => FirstName [ ...
Taking a look at this particular demo: http://jsbin.com/teqifogime/edit?html,css,output In the initial section, we observe that the text color changes simultaneously as the background color transitions, owing to inheriting properties from its parent cont ...
I am a beginner in the world of sass and I am trying to incorporate a variable from a file named "_designs.scss" into another file called "_component.scss". Despite my efforts, I keep encountering an "Undefined variable: $grey-light-2" error. I have exhaus ...
Dealing with IE6 bugs has left me exhausted. The problem lies in two (position:absolute) divs that are not functioning properly in terms of their z-index. Here is an example: /* css */ #overlay{ position:absolute; height:1200px; z-index:2; ...
So, I find myself in a bit of a bind trying to come up with a title for this question. I have stumbled upon some HTML files that seem so complex, they could only have been crafted by the one and only Lord Lucifer himself. These files contain segments like ...
I have customized a material-ui slider with some custom CSS and it is contained within a div of small width, requiring overflowX. How can I maintain a 5px margin between each mark on the slider? Check out the demo here https://i.sstatic.net/bxiXE.png Th ...
Currently, I am working with Bootstrap 4.3.1 and I have been attempting to place a submit button inside an input field. I have tried various methods from StackOverflow but haven't found a solution yet. Since my input has the class rounded-pill, it is ...
I've encountered an issue while attempting to parse through an HTML file that consists solely of tags. I wrote a function to extract the content between these tags, and while I'm able to display it on the page without any problems, inserting th ...
I've been coding for a number of years now, but I've recently started learning CSS. I'm currently facing an issue and need some help. I want to place two divs next to each other and center them. Here's the code I'm using: HTML: & ...
Encountering a problem with CSS and IE, specifically in Internet Explorer 9. When hovering over certain links, the text shifts down which does not occur when using Firefox. You can see an example of this issue at: http://www.debtdispatch.com/list_item_err ...
Is there a way to use CSS to sort disabled options in a select element? I would like all disabled options to appear at the bottom, with enabled options at the top. In the screenshot attached, you can see that enabled options are black and disabled options ...
<section> <div class="section-header"> <h5>Discover Our Team</h5> <h1>Meet the Experts</h1> <h5>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt, eaque.</h5> ...
After trying to integrate $tr.find('td').fadeOut(1000, function () { $tr.remove(); into my deletion function for removing a row upon clicking the delete button, I realized it wasn't functioning as expected. func ...
I am currently designing an editor that requires a line-number bar (gutter) on the left side. I have set a div with a height of 100% and its parent div with overflow: auto. My expectation is that if the content exceeds the given height, the editor-body sh ...
I have a query, is it feasible to include a tooltip in the alert message? Alternatively, could there be another tooltip option available? Swal.fire({ title: '<strong>An example with HTML tags</strong>', icon: 'info', ...
I'm facing an issue where my PHP code is not inserting any data. I have a form that displays values, but the update code doesn't seem to be working. Can someone please help me with this problem? Here is the PHP code snippet: if (isset($_POST[&ap ...
I am trying to horizontally lay out an ordered list with multiple top level nodes while preserving the vertical layout of child nodes. For example, consider a basic list structure like this: <ol> <li>Top 1 <li>Sub 1</li ...
Is there a way to position a div outside the main wrapper (980px) of my website without causing horizontal scrollbars in the 1024px screen size? I'm open to solutions using CSS or jQuery. Any suggestions? The segment that needs to be outside should ...
I've been working on developing a C# string builder that will be used to construct an HTML page using data from a database and user input. My current challenge involves adding two buttons to the string - one that redirects to a.asp and the other to b ...