The <a> tag styled as a button with the btn-primary class is malfunctioning specifically on MacOS Safari

Trying to use an anchor tag with type button and btn-primary class on MacOS safari is causing issues, while it works perfectly on Chrome and Edge browsers

<a class="btn btn-primary " style="border-radius: 25px;" type="button" href="#"  <i class="fa fa-download" aria-hidden="true"></i>> Download Client</a>

This problem is specific to the MacOS Safari browser.

https://i.sstatic.net/PU6hu.png

The code functions correctly in the Chrome browser.

https://i.sstatic.net/gtxqM.png

Please provide guidance on how to correctly implement the anchor tag using Bootstrap.

Answer №1

If you eliminate the type="button", it will function properly.

<a class="btn btn-primary" style="border-radius: 25px;" href="#"> 
    <i class="fa fa-download" aria-hidden="true"></i> Download Client
</a>

Keep coding joyfully!

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

Reveal covert web data table

I am encountering difficulties while attempting to extract information from a table that does not seem to be visible. The specific table can be found on this page, within the 'Code History' section highlighted in light purple. Login credentials ...

Creating personalized templates in DJANGO - Efficiently linking help_text to individual fields

When creating a registration form using my own CSS and HTML, I encountered an issue with displaying error messages from Django's default help_text. Although I can show the help_text using the code below, I am having trouble associating the errors with ...

Update a div's content with a click

I'm looking for a way to update the data in my div whenever I click on a link that reveals the div. Despite finding many similar answers, none have worked for me. Here's what I have: I have multiple divs that become visible when clicking on lin ...

What is the process for designing a unique page in Wordpress with a custom stylesheet?

I'm a beginner with wordpress and I'm facing some challenges. I have 4 custom page templates that I need to create: Home, Portfolio, About, Contact. Each of these new pages requires a unique CSS file. I have enqueued my script portfolio.css lik ...

What is the best way to display a background image within my div element?

I'm trying to create my first child inside the div.missions, but it's not displaying. The only thing showing is the background color of the second child. Can someone assist me with this issue? Let me share my code with you: Here's my HTML: ...

use ".otherwise" or /** with the latest version of Angular2 Router to redirect non-routes using wildcards

Can anyone provide guidance on using wild cards to route in the new Router when a non functional route is specified? Similar to the .otherwise method in Angular 1.X router or /** in previous beta router. Additionally, any example or Plunker code would be ...

Decompressing CSS in PhpStorm

I'm currently using PhpStorm version 2016.3.2. Occasionally, I come across <style> tags in my HTML files containing minified CSS code. Is there a way to create a shortcut for unminifying the code within these tags? For instance, the following ...

What is the best approach to determine the value of a textbox in an array for each row of

I am trying to display the total sum of values for each row in a data array. There are 5 rows of data, and I need to calculate the results for each one. Can someone assist me in solving this? function calculateTotalValue(){ var total = (document.get ...

Encounter an error during testing with jest where the issue arises from converting circular structure to JSON in moment.js on a specific line

While working with Angular and Jest, I encountered an error when incorporating moment.js into my code. Below is the import statement in my component: import * as moment from "moment"; The line where the error occurs: const date = moment(new Dat ...

How to delete strings from a variable using PHP

I am currently working on my project with the "AngularJS" invoice template. The issue I am facing is that the currency symbol appears in the sub total text box. While this is fine for display purposes, when I input data into the database, it also adds the ...

What causes variations in the output of getClientRects() for identical code snippets?

Here is the code snippet provided. If you click on "Run code snippet" button, you will see the output: 1 - p.getClientRects().length 2 - span.getClientRects().length However, if you expand the snippet first and then run it, you will notice a slight dif ...

Tips for embedding HTML code within a table

I'm facing a challenge trying to store HTML code with special characters like " and ' into my MySQL database. Escaping the special characters with a backslash is not a convenient solution for me, so I am searching for alternatives. Most of the s ...

How to extract values from a Multi Select Box in PHP and convert them into a comma separated

Hey there! I'm currently working with a multi-select box setup in my HTML code. Check it out below: HTML <form action="c3.php" method="post"> <select name="ary[]" multiple="multiple"> <opti ...

I encountered an issue with my h3 element's margin not being applied properly when I attempted to add

I'm facing an issue with the margin for <h3> tag in my HTML code. I want to create some space between the form and the h3 element. Here is the CSS: *{ margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; } body{ background-ima ...

Potential problem of Angular 13.0.0 and Bootstrap 5.1.3 interaction leading to malfunctioning carousel transition animations after compiling with ng build

When using Angular 13.0.0 and Bootstrap 5.1.3, the carousel animations are not working properly after building the Angular application for production using ng build and hosting it on localhost as static files via nginx. However, the animations and transit ...

Inconsistent Animation Issue with jQuery Toggle for Expanding Div and Text

My expanding div functionality is almost perfect, but I've noticed that the transition when opening abruptly on divs with text. However, the closing transition is smooth. Can anyone help me make the opening transition as smooth as the closing one? Bel ...

Stop the Bootstrap navbar from breaking into separate lines when resizing the screen by ensuring it collapses into an icon

I have a straightforward Bootstrap Navbar that contains just a few items. When the width is less than 768, it displays in two rows. How can I make both items display in a single row at all widths without using the collapse feature? <nav class="na ...

An icon wrapped in an <a> element using the link_to tag

I am encountering an issue with a navbar button: <%= link_to new_post_path do %> <a class="btn-navbar"><i class="fa fa-plus" aria-hidden="true"></i></a> <% end %> The button is unresponsive and does not direct me to ...

Preventing selection of past dates with Material UI in ReactJS

I'm currently working on a date range picker using react material ui. The goal is to allow users to select a specific date and then disable all past dates from that selected date onward. How can I go about implementing this functionality in react mate ...

The loading of Bootstrap was halted by WAMP

Hi there, I'm encountering some issues with my WAMP setup. Previously, my pages were loading fine on WAMP, but a few months back, I attempted to use a keyboard shortcut to refresh a tab on Chrome. After that, my Bootstrap stopped loading. Everything w ...