What is it about the appearance of buttons in Chrome that doesn't quite match up to how they look in

I am struggling to make my button display the same in Chrome as it does in Mozilla Firefox. Here is the CSS code I am using:

.myButton {
     font-size: 14px;
     background:#e3e3e3;
     color:gray;
     padding:11px;
     margin-right: 0;
     width: 100%;
     border: 0;
     border-radius: 4px;
     font: normal 'Roboto Condensed', Helvetica, Arial, serif;
     text-transform:uppercase;
     text-align:center;
     display:inline-block;
     transition:all 0.3s;
     text-decoration:none;
     -webkit-appearance: button;
     cursor: pointer;
     margin:0;
     max-width:100%;
     vertical-align:baseline;
     box-sizing:border-box;
    -webkit-font-smoothing: antialiased;
}
.myButton:hover {
    background-color:#e9e9e9;
}
.myButton:active {
    position:relative;
    top:1px;
}

HTML:

<a href="#" class="myButton">Apply</a>

Button appearance in Chrome:

Button appearance in Mozilla Firefox:

Any guidance or tips on achieving consistency across browsers would be greatly appreciated.

htmlcssgoogle-chromebrowsermozilla

Answer №1

It appears that there is an issue with the border and background in your code.

These are both being defined by -webkit-appearance: button;. In CSS, the last declaration takes precedence, so if you have conflicting background settings, the final one will be applied.

To resolve this, simply remove -webkit-appearance: button; from your stylesheet and everything should function as expected.

Answer №2

To ensure consistency across all browsers, consider utilizing an image as the background for your button while maintaining its functionality as an anchor link. By creating a visually appealing button using software like Photoshop, you can customize the look and feel of your link.

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

Display Email content within a bootstrap modal using CSS styling

Is there a way to prevent CSS from overwriting tags on my original page when loading an email body into a modal via ajax call? The email body has its own CSS styles that are affecting the layout of my current page. I've considered renaming all the tag ...

jquerycsstwitter-bootstrap

Adding a JavaScript global variable into a <div> element within the HTML body

Here is an example HTML tag: <div data-dojo-type="dojox.data.XmlStore" data-dojo-props="url:'http://135.250.70.162:8081/eqmWS/services/eq/Equipment/All/6204/2', label:'text'" data-dojo-id="bookStore3"></div> In ...

javascripthtml

React-Router Refreshes Component When Moving To Another Route

I am currently in the process of familiarizing myself with React and Redux. My current setup involves the following: Within the store's state, there is a property named 'activeAction' which stores a number value. The 'activeAction&apos ...

javascripthtmlreactjsreduxreact-router

Implementing a queue with an on-click event

As a self-proclaimed Java nerd diving into the world of jQuery, I'm facing some challenges. My goal is to create 3 interactive boxes that behave in a specific way: when clicked, one box should come forward while the other two dim and stay in the back ...

javascriptjqueryhtmlcss

Issue with Bootsrap 4 Dropdown Menu Displaying Incomplete Links

There seems to be an issue with the Bootstrap 4 dropdown menu not displaying all the links. Please refer to the image below: https://i.sstatic.net/ZS2t2.png The dropdown menu is not showing beyond the red band. I can't seem to figure out what I&apos ...

javascriptcsshtmltwitter-bootstrapbootstrap-4

Ways to make the submenu display underneath the main menu

Click here to view the menu It is important to note that you may need to expand the Result Box in order to see the full menu. The issue I am currently facing involves fixing a submenu that appears when hovering over the Men and Women <li> elements. ...

javascriptjqueryhtmlcssmenu

items with sticky positioning on CSS grid

I've searched through various examples, but none seem to solve my issue. I am trying to make the sidebar (section) sticky as the page scrolls. The position:sticky property works when applied to the navigation bar, so it's definitely supported by ...

htmlcsscss-positioncss-grid

Attempting to conceal a div element along with its contents using AngularJS

I am attempting to use AngularJS to hide a div and its contents. I have defined a scope variable initialized as false and passed it to the div in order to hide it. However, the div is still visible along with its content. <script type="text/javascr ...

javascripthtmlangularjs

When using ng-click, each function is executed only a single time

After creating a function that combines two separate functions (recorder.start() and recorder.stop()), I encountered a problem where the program could only fire one of the functions at a time when they were added to one ng-click. This meant that in order f ...

javascriptangularjsgoogle-chrome

Creating a Popup with JS, JQuery, CSS, and HTML

Seeking assistance in creating an HTML, CSS, and JS/jQuery popup. Looking to have a button that reveals a div tag when clicked, which can also be closed. Any quick responses with solutions would be greatly appreciated. Thank you in advance! ...

javascriptjqueryhtmlcsspopup

Identify and emphasize CSS codes within PHP files using Notepad++

I'm working with a PHP file in Notepad++ that correctly highlights PHP code. Within this file, I have JavaScript code which is properly recognized between the <script type="text/javascript"> and </script> tags. However, the CSS code withi ...

cssnotepad++

Is it HTML True or False in the editor?

For the HTML template I'm working on, I want to implement a feature where users can toggle tags on and off easily. My idea is to make it as simple as setting a value to "true" or "false." Is there a way to achieve this within a single HTML file? ...

html

Adding an automatically generated link within an HTML form

I am working on a web page that displays dynamic content and includes a form for user submissions. How can I add a unique reference to each of these pages within the form? <div class="detalle-form-wrap"> <div> <h1> ...

javascriptjqueryhtmlforms

Steps for updating a text section beneath a carousel

I'm looking to enhance my webpage with a bootstrap carousel, which is pretty standard. However, I want the content under each slide to change dynamically, but I'm struggling to make it work. As a newbie, I could use some guidance. I've atte ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is causing elements like divs, paragraphs, or text not to display within an ion-item after an ion-input is added?

I am currently working on validating a simple form and everything seems to be functioning properly. However, I have encountered an issue with displaying text messages within an ionic 3 list item. The ion-item consists of an ion-input element. When I place ...

javascripthtmlangularionic-framework

Make HTML design responsive to any screen size

After completing the design of a mobile app interface with dimensions 750w by 1334H, I encountered an issue where it appears too large on the app testing screen. I am seeking a way to automatically adjust the design to fit all screens without compromising ...

htmlcss

Automatically activate a button when it comes into view while scrolling

I am currently working in Joomla, which makes it challenging to create a fiddle, but here is the concept: My website displays a mosaic grid of 12 articles upon loading, along with a 'Load More' button. When this button is clicked, an additional ...

javascriptjqueryhtml

Creating three cards with identical height using Bootstrap and flexbox techniques

I am struggling to align 3 blocks in height and keep the yellow block fixed at the bottom of its parent container. After trying different solutions, this is the outcome I have: https://i.sstatic.net/QOHsV.png The yellow block is not positioned correctly ...

cssbootstrap-4flexbox

How can I use jQuery to either display or hide the "#" value in a URL?

I have a question that I need help with. Let's say I have the following links: <a href="#test1"> Test </a> <a href="#test2"> Test 2 </a> When I click on Test, the URL will change to something like siteurl/#test1. However, whe ...

javascriptjqueryhtml

Resolved issue with fixed div flickering upon clicking link on Phonegap platform, leveraging Bootstrap

Upon attempting to click a link positioned at the bottom of the screen within a colored div using position:fixed;, I notice that the page momentarily flashes white before displaying the "new" page. Removing the fixed positioning allows the new page to load ...

htmlcsstwitter-bootstrapcordova