Is it better to use <div><a /></div> over <button />?

I've recently taken over the maintenance and upgrade of an existing website.

One interesting aspect of the site is how it handles buttons.

The html code for buttons looks like this:

<div class="btn">
    <a id="dv_remCont" runat="server" href="#" onclick="removeContact();">remove contact</a>
</div>

While the css styling for buttons is as follows:

div.btn a {
        font-weight:bold;
        display:inline-block;
        border-radius: 2px;
        padding: 0 1.2em 0 1.2em;
        color:#ffffff;
        background-color:black;
        box-shadow: 0px 0px 5px 1px #898986, inset -1px -1px 1px rgba(0,0,0,0.5), inset 1px 1px 1px rgba(255,255,255,0.8), 0px 0px 1px 1px #000000;
    }
div.btn a:hover {
    box-shadow: 0px 0px 5px 1px #898986, inset 1px 1px 1px rgba(0,0,0,0.5), inset -1px -1px 1px rgba(255,255,255,0.8), 0px 0px 1px 1px #000000;
}

Using this method creates visually appealing clickable buttons. However, it also presents some challenges such as issues with form functionality and alignment problems in older versions of Internet Explorer.

What do you think are the benefits of implementing buttons in this manner? Have you encountered buttons styled like this before?

htmlcss

Answer №1

There seems to be no clear reason for doing this, perhaps the developer struggled to completely reset the button style to its default before applying a customized style.

Even after attempting to reset padding, borders, backgrounds, and margins, the button may still not appear entirely unstyled in browsers like Firefox 3.6 or IE 7/8, which were likely the main targets during the code's development.

Here is an example you can experiment with - I've included a border reset to make the button and fake button appear more similar. To achieve an exact match, don't forget to add text-decoration: underline, although personally, I find it odd to underline a button that already looks clickable!

Check out the demonstration here

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

During my JavaScript coding session, I encountered an issue that reads: "Uncaught TypeError: $(...).popover is not a function". This

Encountering an issue while trying to set up popovers, as I am receiving this error: Uncaught TypeError: $(...).popover is not a function. Bootstrap 5 and jQuery links are included in the code, but despite that, the functionality is still not operational. ...

javascripthtmldjangobootstrap-5popover

Is it permissible to have multiple class tags in HTML?

Is the HTML code below correctly formatted? <div class="navbar" class="menu">foo</div> Can two classes be applied to the same element? ...

htmlcss

The dimensions of the image are determined by its orientation

I am working with two different types of images on my website: vertical and horizontal. Currently, I have a JavaScript function that adjusts the height of all images to fit the screen size. However, I would like to modify this function so that it also adap ...

javascriptjqueryhtmlcss

Problem with CSS dotted borders appearing as dashed in Chrome when applied to adjacent columns in a table

After testing the code on both Chrome and Firefox browsers, I noticed that they display the border differently. In Chrome, there is a dash in between adjacent cells while in Firefox, there are no dashes rendering. Can anyone suggest a solution to fix thi ...

htmlcssfirefoxgoogle-chromeborder

Position two div elements so that the second div expands to occupy the entire available space

I am struggling with aligning two divs within a container div, one on the left and one on the right. I am using flexbox for alignment purposes, as shown in the code snippet below. .box { display: flex; align-items: center; just ...

htmlcssflexbox

Activate the div when hovering over the span

Experiencing an issue with triggering a visible div while hovering over a span. Here is the code structure: <ul class="products"> <li> <a href="somelink"> <img src="some image"> <div class="overlay"> Some Text</div> & ...

javascriptcsswordpress

When I zoom in, h4 and h5 headers expand and extend beyond their boundaries

Currently, I am working on designing forms for this specific website. Everything appears to render properly at normal zoom levels. However, when I adjust the zoom in or out slightly, issues arise where the h4's and h5's are no longer centered wit ...

htmlcssoverflowweb

Having trouble getting a background image with tint to display properly in Bootstrap

I applied a sleek black transparent gradient to my body background picture, but as soon as I integrated bootstrap into the HTML code, the effect ceased to function. body { background: linear-gradient( rgba(0, 0, 0, 0.5), rgba ...

htmlcssbootstrap-4

What is the best way to perfectly center the navbar-nav class element in a menu using Bootstrap 5?

Currently, I am in the process of developing a backend for a novice website while also revamping the front end. My knowledge of frontend development is limited, so I have opted to utilize Bootstrap 5. One of my tasks involves transferring the menu from the ...

htmlcssbootstrap-5

Adjusting the size of the iframe to match the dimensions of the window

Is there a way to make the iframe automatically fill up the entire space? For example, only opens the iframe up to half of the window in Mozilla Firefox and IE6. How can I ensure that it takes the maximum size of the screen? Are there any CSS or JavaScr ...

javascriptcssiframesize

What is the best way to add a centered progress spinner on top of an overlay?

Here is a code snippet that includes functionality to append a site overlay as needed. I am currently trying to implement the feature of also displaying an image progress spinner in the center of the screen over the overlay. I would prefer if this spinner ...

jquerycssoverlay

Dynamic menu that showcases chosen options along with an option to "Add more"

Creating a select drop-down menu that displays the selected results off to the side in a span with "Results" added before it (similar to a label in a form input). Beneath the select, there is an "Add another" button. When clicked, it adds another "Results ...

javascriptjqueryhtml

Rearrange the text next to the Checkbox using Bootstrap

I'm having trouble aligning the "Default checkbox" text next to the checkbox itself checkbox This is what I've attempted so far <div class="col-2"> <label for="Desc" class="col-sm col-form-label">D ...

javascripthtmljquerybootstrap-4text-alignment

Discover the secret to easily displaying or concealing the form of your choice with the perfect fields

Greetings! I require assistance in understanding how to hide or display a form. Specifically, I have two forms - studentForm and EmployeeForm. When selected from the dropdown list profileType, I want the corresponding form to be displayed. I am facing an ...

jquerypythonhtmldjangoforms

I would like to implement a delay on this button so that when it is clicked, there is a pause before navigating

When I add the delay, it doesn't work, and when I remove it, it does. What can I do to make this button have a href link that delays before redirecting to another page? (I'm a newbie) I need to click and wait 3 seconds before navigating to other ...

javascripthtmljquerycss

The dimensions of the background for a span element

I have a span element with a background-color applied to it. Is there a way to adjust the size of this specific background? I attempted using background-size: auto 2px;, but it did not produce the desired effect. I am looking to make the background color ...

css

How to insert a custom logo into a bootstrap navbar on a Ruby on Rails website

I have encountered a similar issue to this, but I haven't been able to resolve it. I am currently working on my first application using rails and bootstrap. I've successfully created a navbar with a name and two buttons (you can view the screensh ...

htmlcssruby-on-railsbootstrap-4navbar

"Guidance on jQuery syntax: Use a textbox to filter out and hide select options with each keystroke

Is there a way to modify my existing code so that it can show or hide elements based on a filter condition, specifically for Internet Explorer? I want to wrap the unmatched elements in a SPAN tag and hide them if the browser is IE, and vice versa by remo ...

javascriptjqueryhtmlsyntax

Is it possible to activate multiple animations simultaneously within a single div using UIKit?

I recently started developing a to-do web application and was looking to enhance its appearance with some animations using UIKit. Currently, I have an animation that toggles when the todo-items are brought into view: <div class="todo-items uk-anim ...

javascripthtmlvue.jsanimationuikit

Adjust the FlipClock time based on the attribute value

When setting up multiple FlipClock objects on a page, I need to retrieve an attribute from the HTML element. The specific HTML tag for the clock is: <span class="expire-clock" data-expire="2015-09-22"> Is there a way to access '2015-09-22&apos ...

javascriptjqueryhtmlflipclock