Unusual quirks observed while applying styles to a button in Firefox

For making circular buttons in Bootstrap 4, I use the following CSS style:

.btn-circle {
    width: 50px;
    height: 50px;
    padding: 6px 0px;
    border-radius: 50%;
    font-size: 1.5rem;
    text-align: center;
}

Here is the HTML code I implement:

<button class="btn btn-primary btn-circle"><i class="fas fa-sign-out-alt"></i></button>

While everything works smoothly in Chrome browser, I encountered an issue with Firefox version 78.4 where the button momentarily turns square due to the background color applied by the .btn-primary class.

I attempted using pseudo classes like this:

.btn-primary.btn-circle:hover:active:focus {
    background-color: transparent !important;
}

Unfortunately, this did not resolve the problem. Any suggestions on how I can tackle this Firefox behavior?

Update:

Removing the .btn-primary class resulted in the button having a white background in Firefox. However, the specific CSS rule causing this behavior remains unclear.

htmlcssbootstrap-4

Answer №1

One possible solution is to include margin in the .btn-circle class definition.

To prevent the bootstrap button CSS from being applied to .btn-circle, you can use .btn.btn-circle class instead like this: 

.btn.btn-circle {
  width: 50px;
  height: 50px;
  padding: 6px 0px;
  border-radius: 50%;
  font-size: 1.5rem;
  text-align: center;
  margin: 10px;
}

.btn-primary.btn-circle:hover:active:focus {
  background-color: transparent !important;
}
<button class="btn btn-primary btn-circle"><i class="fas fa-sign-out-alt"></i></button>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

Answer №2

There is an issue with the box-shadow property, which is being inherited from the default styling in bootstrap-4.

To fix this, you will need to override the CSS with your own custom styles.

.btn-primary.btn-circle {
    width: 50px;
    height: 50px;
    padding: 6px 0px;
    border-radius: 50%;
    font-size: 1.5rem;
    text-align: center;
    outline:none;
}
.btn-primary.btn-circle.focus, .btn-primary.btn-circle:focus, .btn-primary.btn-circle:not(:disabled):not(.disabled):active:focus{
    box-shadow: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<button class="btn btn-primary btn-circle"><i class="fas fa-sign-out-alt"></i></button>

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

How do I go about extracting and presenting the JSON data from the ESPN API?

In my current project, I am trying to utilize the jQuery library to work with API JSON data. Even though I am experienced in parsing JSON in PHP, I want to explore doing it with jQuery this time around. The goal is to extract information about each of the ...

javascriptjqueryhtmljson

Creating a fully responsive grid layout with Bootstrap 4: Utilizing columns within

I designed a page using Bootstrap 4, featuring an options menu on the left side and a container div with rows and columns. To display the options menu, I adjusted the size of the container div by changing the "left" value. However, the arrangement of the ...

containersbootstrap-4responsive

Learn the trick to make this floating icon descend gracefully and stick around!

I'm trying to create a scrolling effect for icons on my website where they stay fixed after scrolling down a certain number of pixels. I've managed to make the header fixed after scrolling, but I'm unsure how to achieve this specific effect. ...

javascriptjqueryhtmlcssskrollr

`Div Elements Overlapping`

Lately, I have been working on my personal portfolio and I encountered an issue with the contact form overlapping the footer. Can anyone provide some guidance on how to resolve this? Any help is greatly appreciated. https://i.stack.imgur.com/neIbs.gif ...

htmlcssoverlapping

Can you explain the significance of the <%= %> HTML tag?

I've recently been tackling a project with Webpack. For those not familiar, Webpack is a bundler that combines all your files into one final product. One task I encountered was trying to insert one HTML file into another, similar to an import or requ ...

javascripthtmlwebpacktags

FAQs about utilizing percentage width and margins in CSS with Bootstrap

Currently, I am working on a mobile responsive web design using Twitter Bootstrap 3, and I am facing challenges with margins and resizing. I previously asked about creating a mobile-first responsive web design along with responsive images, which you can f ...

htmlcsstwitter-bootstrapresponsive-designmargin

Link functioning properly for one item but failing for another

I am facing an issue with my index.html file that contains the following code: <li> <a href="imprint.html#imprint-link"> <div class="main-menu-title">IMPRINT</div> </a> </li> Clicking on the "IMPRINT" link loa ...

htmlcss

Could you suggest an alternative method for retrieving the image from the database and displaying it in the Dynamic Carousel?

Many people have asked the same question, but none of their solutions have worked for me. I used bootstrap to create a Dynamic Carousel that fetches images from the database folder path (uploadimages/news/) and used a foreach loop to iterate over arrays. H ...

phphtmlmysqlbootstrap-4

Swap out the image for a div element if the image is not found

Is there a way to accurately display an image if it's available, and use a div as a replacement if the image is not present? // How can I determine `imageExists` without encountering cross-origin issues? (imageExists) ? (<img class="avatar-img" sr ...

javascripthtmlajaxxmlhttprequestcross-domain

Initiate a click on a radio button while also retaining the selected option when the page is

This is a unique question. In my scenario, there are two radio buttons: "radio1" and "radio2." I have successfully implemented the following actions individually: Automatically triggering a click on "radio1" upon page load. This ensures that the button ...

javascriptphpjqueryhtmlradio-button

Rails Application experiencing issues with Bootstrap 4.1.1 integration

Despite running bundle install and bundle update, my app is not reflecting any changes with the bootstrap code. I have included the following in my Gemfile: gem 'bootstrap', '~> 4.1', '>= 4.1.1' Here is my layout file ...

ruby-on-railsbootstrap-4

Utilize Cordova to download files and access them within the Cordova framework

Apologies for my lack of knowledge, any guidance or assistance in the right direction would be highly valued. I am working on a small application that retrieves data from an API using json requests. One of the functionalities required is to download a spe ...

htmlcordovajquery-mobile

Combining the total of numerous inputs that are multiplied by a specific value all at once

Hey, I've been working on a project with a table and an input field with costs using jQuery. You can check out This Fiddle for reference. $( ".total" ).change(function() { let i = 1; var input001 = document.getElementsByName(i)[0]; var ...

javascriptphpjqueryhtml

Assign a unique HTML attribute to a child element within a Material-UI component

Currently, I am trying to include the custom HTML5 attribute "data-metrics" in the span element within the ListItemText Material UI component. However, I am facing some difficulty achieving this as per the specifications outlined in the Component API Docum ...

javascripthtmlreactjsmaterial-ui

The background image on my link bar is inexplicably not appearing

I've been trying to solve this issue for hours and I'm at a loss. Initially, the background image was displaying correctly, but now it's not working. HTML: <head> <link type="text/css" rel="stylesheet" href="css/normalize.css" ...

phphtmlcssimagebackground

Function is raising an error with the wrong value or text

I am currently testing a form that I am in the process of developing. My goal is to have different values returned each time I click on a different item from the dropdown menu. If this explanation isn't clear, please take a quick look at my pen for cl ...

javascriptjqueryhtmlcss

How can I insert an image into a circular shape using HTML and CSS?

To achieve the desired effect, the image should be placed inside a circle with a white background. The image size should be smaller than the circle and centered within it. One possible way to accomplish this is: .icon i { color: #fff; width: 40px; ...

htmlcss

Increment your ids automatically for bootstrap collapse components

To utilize Bootstrap's Collapse components effectively, it is necessary to have sections (or cards) with unique IDs assigned to allow for independent collapsing and expanding. My challenge lies in creating multiple sections, each representing a data p ...

javascriptvue.jsbootstrap-4

How can I achieve the functionality of an image changing when clicked and going back to its original state upon release with the help of HTML

I am facing an issue with styling an element to look like a button and function as a clickable link. My goal is to create a visual effect of a pressed button when it is clicked, while also loading the target page. For reference, here is a (non-working) J ...

javascripthtmlonclickonmousedownonmouseup

What is causing the div to not update until the for loop is completed?

I have an HTML page where I am trying to update a div while a for loop is running. However, the div does not update until after the loop finishes. Why is this happening? <!DOCTYPE html> <html> <body> ...

htmlloopsdisplay