How can I make a <button> element resemble an <a> element with CSS styling?

Consider the snippet below:

div {
  width: 150px;
  line-height: 1.5;
}

a,
button {
  background: red;
}

button {
  display: inline;
  font-size: inherit;
  font-family: inherit;
  padding: 0;
  margin: 0;
  border: none;
  text-align: left;
}
<div>
  Some text
  <a>
    <span>abcdefghi abcdefghi abcdefghi abcdefghi</span>
  </a>
  Some text

  <br />
  <br /> Some text
  <button>
    <span>abcdefghi abcdefghi abcdefghi abcdefghi</span>
  </button> Some text
</div>

How can I make sure that the appearance of the second block containing <button> as a wrapper matches the one with <a> as a wrapper?

I'm attempting to create an in-text button for opening a modal, and the issue arises when the text wraps to a new line. While I could use <a>, it wouldn't be semantically correct.

Using white-space: nowrap is not a viable solution.

I assumed that setting display: inline would resolve the problem, but could there be any default browser styles affecting this behavior?

This solution needs to be compatible with IE10, meaning I cannot utilize display: content or unset: all.

htmlcss

Answer №1

Is this the style you're looking for?

div {
  width: 150px;
  line-height: 1.5;
}

a,
button {
  background: red;
}

button {
  background: none!important;
  border: none;
  padding: 0!important;
  /*optional*/
  font-family: arial, sans-serif;
  /*input has OS specific font-family*/
  color: #069;
  text-decoration: underline;
  cursor: pointer;
}
<div>
  Some example text
  <a>
    <span>abcdefghi abcdefghi abcdefghi abcdefghi</span>
  </a>
  Some example text

  <br />
  <br /> Some more sample text
  <button>
    <span>abcdefghi abcdefghi abcdefghi abcdefghi</span>
  </button> Some additional text
</div>

Answer №2

I may question why you believe that an a element wouldn't be semantically accurate in this context?

According to information from MDN

The HTML element (or anchor element), along with its href attribute, creates a hyperlink to other web pages, files, locations within the same page, email addresses, or any other URL.

In my view, a modal can be considered a location within the same page. In fact, especially when discussing PWA (Progressive Web App) and overall user experience, it could be beneficial for the modal to have a specific URL, further validating the use of an a element.

Additionally, in terms of usability, buttons should visually appear as buttons (with certain limitations). I would argue that masking a button as a link is less effective than utilizing an a element.

Answer №3

Make sure to adjust your button by setting the width to 0, background to transparent, and the line height to match the div.

  width: 0;
  background: transparent;
  line-height: 1.5;

Additionally, update the red background color from using the button selector to the button span selector

div {
  width: 100px;
  line-height: 1.5;
}

a,
button span {
  background-color: red;
}

button {
  display: block;
  font-size: inherit;
  font-family: inherit;
  padding: 0;
  margin: 0;
  border: none;
  width: 0;
  background: transparent;
  line-height: 1.5;
}
<div>
  Some text
  <a>
    <span>abcdefghi abcdefghi abcdefghi abcdefghi</span>
  </a>
  Some text
  <br />
  <br />
  Some text
  <button>
    <span>abcdefghi abcdefghi abcdefghi abcdefghi</span>
  </button>
  Some text
</div>

Answer №4

For additional information, please visit:

An enhanced and optimized version of the provided link is:

button {
  background: none!important;
  border: none;
  padding: 0!important;
  text-decoration: underline;
  cursor: pointer;
}

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

Leveraging an HTML form for searching and fetching data from MySQL Workbench using PHP

I'm currently working on fetching data from my database by utilizing an HTML form and establishing a PHP connection to my SQL workbench. The data retrieval is successful, as it appears at the top of my webpage. However, I am facing issues with executi ...

phphtmlmysql

Getting rid of a blue border from a button upon clicking

Here is the problematic section of code :root { --color-foreground-text-main: rgb(255, 72, 142); --color-foreground-text-sub: rgb(0, 114, 153); } html, body { height: 100%; } img { max-width: 100%; } #cover { background: #222 url('Reso ...

htmlcssbootstrap-4

Difficulty with jQuery, CSS, and Internet Explorer: concealed elements briefly showing during page load

Can anyone relate to the situation described below? Here's a simple example: #menuHolder contains menu items like #itemA, #itemB, #itemC,...#itemZ In my CSS, I've set #menuHolder's overflow property to hidden. With jQuery, I'm adjus ...

jquerycsshoveroverflowhidden

Update the URL every time the user clicks with JavaScript and HTML

Welcome to my website at Inside, I have this JavaScript code: function updateStyleSheet(sheet){ document.getElementById('pagestyle').setAttribute('href', sheet); And in my HTML, you can find: <li><a href="#" onclick="update ...

javascripthtml

Button for Processing PayPal Payments

Is there a security risk in using a text button to submit a payment form in PayPal Payments Standard instead of an image button like this: <input type="image" src="http://www.paypal.com/en_US/i/btn/btn_cart_LG.gif" border="0" name="submit" alt=""> ...

javascriptphpcsssecuritypaypal

The issue of Bootstrap icons not displaying on the front-end arises when integrating them into a Vuejs Template

I'm in the process of constructing a web application using Vue.JS. I've integrated the [Bootstrap Icons][1] into my application, but for some reason, the icons are not showing up on the screen. Here are the steps I followed: Installed Bootstrap ...

htmlcsstwitter-bootstrapbootstrap-4vuejs2

Stopping setTimeout when leaving the current page: Is it possible?

Good evening, I am looking for advice on how to cancel a setTimeout function when a user navigates to other pages (for example, by clicking other links or pressing the back button in the browser, but not by changing tabs). I have attempted to use the windo ...

javascripthtmlcssreactjssettimeout

Matching Heights for Carousel Images

My image/video carousel is causing trouble as the content within doesn't maintain a consistent height. Clicking on the thumbnails highlights a mismatch in the main image heights. Is there a way to ensure that all elements have the same height while k ...

javascriptjqueryhtmlcss

Strategies for temporarily storing values within md-list-item in AngularJS

I am attempting to populate a list with items using material icons. The issue is that the values are being added permanently when the material icon is clicked, disregarding the save and discard buttons at the bottom of the card. My goal is to add values te ...

javascriptcssangularjshtml

Tips on utilizing multiple dynamically generated toggle switches efficiently

As a Frontend beginner, I am working on implementing toggle switches using HTML, CSS, and Vanilla JavaScript. Approach: I am generating an HTML table with multiple rows based on the data from my Django database. Each row contains details like name, id, a ...

javascripthtmlcssdjangotoggleswitch

Order PHP array by parsing time from HTML content

Looking for a way to sort an array containing HTML values with dates embedded in them? The goal is to rearrange the array based on those dates. Here's how the array is structured: Array( [0] => '<div class="date">April 6, 2016</ ...

phphtmlarrayssorting

Creating a connection between my .html and .ejs files: A step-by-step guide

I have successfully created a pair of HTML files - index.html & contact.html. Within these files, I have implemented a navigation bar that allows for seamless transition between them. Recently, I delved into the realm of retrieving APIs and crafted an app ...

javascripthtmlexpressejsnav

What is the best way to contain the global CSS of an Angular app within an exported web component?

Objective In my Angular 11 website, there is a comprehensive form component created using Angular Material named myExportableComponent. I aim to utilize this component in the site as usual, but also export it as a generic web component or "custom element, ...

cssangularweb-componentangular-elements

Persistent navigation once fullscreen banner is completed

I have a full screen header on my one-page website. Below the hero section is the navigation element, which I want to be fixed after scrolling past the height of the full screen. Here's what I currently have in terms of code. HTML: <div id="hero" ...

javascripthtmlcssfullscreen

The CSS3 scale() function leads to div elements appearing grainy

After experimenting with CSS3 animations, I've noticed that using the scale() function seems to cause pixelation on every element it's applied to. For example, check out this demo: http://jsfiddle.net/PD7Vh/2/ In the provided link, you can see ...

csswebkit

Is there a way to access a CSV file, process its content line by line, decode it using base64, and store the decoded data in a different file?

My goal is to read a csv file, use PHP base64_decode() to decode it, and then write the decoded data to a new file in the same format. I previously attempted to read the file line by line and decode it as it was being read, but the resulting data was corr ...

phphtmlcsvbase64

What's the Best Way to Add a Border to My Two-Column Form?

I'm currently working on a reservation form for my website with a 2-column layout. In one column, I have tables, and I've been trying to add a divider between the columns but haven't found a solution yet. Despite researching ways to add a d ...

htmlformscssstylesmultiple-columns

Tips for showing a single table with buttons on display

I am using R markdown and have included multiple tables with buttons, but when I open the file, all tables are displayed at once. How can I ensure only one table is shown upon opening the file? https://i.sstatic.net/NFidf.png <script type="text/ja ...

javascripthtmlr-markdowndata-science

Is there a way to confirm when all 3 html pages (panes) have been completely refreshed?

I have a webpage with 4 panes, each implemented as separate HTML pages. The last pane needs to perform an action when the previous 3 panes are refreshed. For instance, while the first 3 panes are refreshing, the last pane should display a "LOADING" message ...

javascriptjqueryhtml

An issue with the font display

I'm having trouble with a specific font on my webpage and jsfiddle, even though it works fine on w3schools website. Here's an example on jsfiddle HTML <div> With CSS3, websites can finally use fonts other than the pre-selected "web-safe" ...

cssfonts