The functionality of the button seems to be malfunctioning specifically in the Mac Firefox

My button isn't working in Mac Firefox only. Below is the code:

<button class="col btn-change"><a href="/p/88" style="color: white;">Landscape</a></button>

However, the following two codes are functioning correctly. In the first code snippet, I am using my customized class 'btn-change' for styling. I am also using the Bootstrap 'col' class to group 3-4 buttons together.

<a href="/addproduct/143">
      <button class="btn btn-primary" style="font-family: Poppins">Order Sample Chevron</button>
      </a> 

<div id="buttonRollOverColour" class="col frameSelectBox"><a href="/p/414">Portrait</a></div>
cssbootstrap-4

Answer №1

Please include the following CSS code below, and hopefully it will be effective on Mac devices:

#buttonRollOverColour>a {
    cursor:pointer;
}

This issue may arise because sometimes Mac screens do not fully support non-button elements being treated as button elements. For example, if you are using a button with an anchor tag inside of it, you could achieve the same effect by simply using a button tag instead.

Answer №2

If you prefer a link over a button, you can utilize the a tag. Additionally, you can implement bootstrap styles such as btn btn-primary|btn-light|... to make the a tag resemble button styles.

<a class="col btn btn-primary btn-change" href="/p/88">Landscape</a>

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

Guide to implementing the collapsible start and stop button feature in Angular

Having an issue in my Angular application with the dashboard page. I've created a button for start or stop (toggle functionality) but it's not working as expected. .component.ts toggleCollapse(jammer) { this.jammer.isCollapsed ? 'START& ...

javascriptangulartypescripttwitter-bootstrapbootstrap-4

Discover the steps to incorporate a glowing effect into your custom progress bar using JavaFX

After successfully creating a custom progress Bar in JavaFX, my next step is to incorporate a glow effect into the progressBar. To achieve this, I have constructed an ellipse with a Gaussian blur effect and integrated the centerX of the ellipse into a tim ...

javacssjavafxprogress-bar

Styling Images with Gradient using CSS

Looking to create a unique effect on an image by adding a radial gradient that seamlessly fades into the background color. Despite my efforts, I haven't been able to achieve this using filters and my current code is a bit messy. Here's what I ha ...

javascripthtmlcssweb

Having trouble locating the code for adding a hover effect to the FontAwesome icon

In regards to my portfolio located here: My Portfolio When hovering over the "Marketing Automation" section, a small fa fa-tablet icon appears to the left which turns blue when hovered over. I would like for this icon to remain white, rather than changing ...

htmlcss

What are the best techniques for styling a SELECT box with HTML and CSS?

I've received a form from a talented designer which includes SELECT inputs designed in a unique manner. Despite my attempts to add paddings, adjust backgrounds, I'm unable to replicate the exact appearance of the select box shown in the image. ...

htmlcssselectinput

Pause animation when hovering over their current positions

I am working on a project with two separate divs, each containing a circle and a smiley face. The innercircle1 div is currently rotating with a predefined animation. My goal is to create an effect where hovering over the innercircle1 div will pause its rot ...

javascripthtmlcss

Arranging elements within a div using inline positioning

Currently, I am trying to arrange elements within a div. Below is the div that needs positioning: https://i.sstatic.net/5nZUt.jpg This is the desired layout: https://i.sstatic.net/vXSV9.jpg Here is the HTML and CSS code snippet: #channel-header * { ...

htmlcsselement

Adding a border in jQuery or Javascript to highlight empty form fields

After making the decision to dive into the world of Javascript, I've been dedicated to perfecting a script that will encase empty elements with a border right before the user submits a form. My ultimate goal is to implement live validation in the form ...

javascriptjquerycsshtml

Expansive space for floating numerous tiny circles in the air

Presently, I have a map that features several small circles/dots created using the border-radius property. When hovering over a dot, it triggers an animation along with other effects. MY CONCERN: At the moment, I need to be incredibly accurate when tryi ...

jqueryhtmlcsscss-shapes

Concealing overflow in an SVG element with absolute positioning

Looking to hide the parts of the circle that extend beyond the shadowed container. Utilizing bootstrap-4 for this project. body { overflow: hidden; } .container { margin-top: 5%; width: 1200px; height: 625px; border-radius: 4px; background- ...

csssvgbootstrap-4

organizing the elements in the list into a visually appealing layout

I am currently working on transforming table data into a pivot format and presenting it in a horizontal list. My goal is to ensure the design is responsive enough to be viewed on mobile devices as well. Below you can find the CSS code I have implemented fo ...

css

Is there a way to connect two tables using CSS pseudo-selectors?

Is there a way to make two separate tables interact with each other using CSS pseudo-selectors? I have a data table and an auto-numbered table, and I want the rows to highlight in both tables when hovering over a cell in one of them. I've tried using ...

javascripthtmlcssreactjscss-selectors

Creating a zebra-striped list using CSS can be done by styling even and odd list items differently

I am facing an issue with Angularjs and the table tag when using group loops. The problem arises in achieving correct zebra striping for the list. How can I solve this to ensure the zebra pattern is applied correctly? <table> <tbody> <tr ...

cssangularjs

Can you conceal the label while also displaying the placeholder?

Within my form, I am using the following code: <div id="zipcode-label" class="f-label"><label for="zipcode" class="required">Zip code</label></div> <div id="first-element" class="f-element"><input type="tel" class='ro ...

csshtml

Steps to create a clickable button wrapper label in React

Contained within the components below: <CheckboxGroupLabel htmlFor={option.label}> <FormCheckbox onClick={() => onChange} key={option.label} defaultChecked={defaultChecked} {...rest} /> {option.value} ...

javascripthtmlcssreactjslabel

What is the best way to align this image in the center?

I've been struggling with this problem for a while now and can't seem to find a solution. I need to center align this image within the form, but everything I've tried so far has been unsuccessful. It may seem like I'm providing too much ...

htmlcss

What is the best way to set the width of a nextjs Image using CSS styles

Do you think it's more beneficial to use 'next/image' rather than the traditional img tag? If so, why? I am trying to display an image by specifying width and height in styles using a class called 'img', like this... <img class ...

htmlcssnext.jsnextjs-image

What is the best way to monitor and record the height of a div element in a React application?

Exploring the Height of a Div I am interested in monitoring the height of a div element so that I can dynamically adjust distances based on varying screen widths. The animation should respond to changes in screen width, such as when text stacks and the he ...

javascripthtmlcssreactjs

Deleting a division with the help of media queries

As a challenge, I am attempting to eliminate the .navbar-brand>img element once the screen size exceeds 768px by using media queries. Unfortunately, my efforts have not been successful so far. Although the styling applied to the img is successfully remo ...

cssbootstrap-4media-queries

When hovering, the <a> element does not fully encompass the background color

I am currently working on a navigation bar that changes the background color of the links when hovered. However, I encountered an issue where the dropdown menu in the navigation bar does not cover the entire area. body { margin: 0; font-family: Aria ...

css