Why is my button not displaying consistently in different browsers?

Creating a Stylish CSS Button:

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

I came across a stylish graphical button on a website and decided to replicate it using CSS. My goal is to make this button work seamlessly across all major browsers. Check out the demo: https://codepen.io/Alix-Blaine/pen/wvLwxrN.

Implementing with CSS:

main {
  margin: 0;
  width: 4.313em;
}

a {
  display: block;
  text-decoration: none;
  text-transform: capitalize;
  background-color: #666699;
  font-size: 0.75em;
  color: #FFF;
  padding: .2em;
  box-sizing: border-box;
  border-bottom: 2px inset rgba(26, 25, 25, 0.8);
  border-left: 2px inset rgba(0, 0, 0, .5);
  border-right: 2px inset rgba(26, 25, 25, 0.8);
  border-top: 2px inset rgb(255, 255, 255);
}
<main>
  <a href="index.html">Twitter</a>
</main>

Results:

Chrome

https://i.sstatic.net/4RyhSdLj.png

Firefox

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

htmlcss

Answer №1

If I were aiming for the same end outcome with a crisp finish, my preference would lean towards using vectors like .svg. Here's an example:

<main>
  <a href="index.html"><svg
   version="1.1"
   width="67"
   height="21"
   id="svg17"
   sodipodi:docname="stack.svg"
   inkscape:version="1.3.2 (091e20e, 2023-11-25, custom)"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
  <defs
     id="defs17">
    <rect
       x="43.82093"
       y="43.378296"
       width="306.74652"
       height="124.82326"
       id="rect19" />
    ... // shortened for brevity

</svg></a>
</main>

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

Include a class in a variable within an echo statement

How do I include the variable $title inside an echo statement within a foreach loop? <?php foreach($this->searchfields as $fsearch) { $title = $this->field->showFieldTitle($this->catid,$fsearch); echo "<d ...

phpcss

How can JavaScript be used to run a script only when the screen width is less than 480, and not when it is greater than 480?

Hi there, I have a simple script that I need help with. Despite not being well-versed in JavaScript, I am using Bourbon and Neat for the frontend of my website. On one particular page, I want to implement a collapse script from Bourbon refills. My question ...

javascriptjqueryhtmlcss

The PrimeNg confirmDialog is updating my navbar with some modifications

Despite my navbar working well and being fully responsive, I encountered an issue where opening a confirm dialog in the background caused the navbar width to expand to 800px even though the screen width was 1480px, creating empty space on the right side, a ...

htmlcssangularnavbarprimeng

Executing Javascript without invoking the default behavior

Recently, I've been delving into the world of JavaScript and experimenting with the prevent default command for ajax pagination. Here's the code I've come up with: http://jsfiddle.net/6pqfH/2/ $('.pagination').click(function(e){ ...

javascripthtmlajaxpreventdefault

What is the best way to create a deck of cards using cards of the same width?

Need help creating a responsive card deck with fixed-width cards in Bootstrap 4. I've included the code below, but it's not rendering responsively. Can anyone assist? <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4. ...

htmlcsstwitter-bootstrapbootstrap-4

Receiving duplicate data on WordPress pages

I have made some changes to my theme page.php: <?php /* The loop */ ?> <?php while ( have_posts() ) : the_post(); ?> <article id="post-<?php the_ID(); ?>" <?php post_class(); ?> > <header class="entry-header"&g ...

phphtmlwordpress

Boundaries on Maps: A guide to verifying addresses within a boundary

User provides address on the website. If the address falls within the defined boundary, it is marked as "Eligible". If outside the boundary, labeled as "Ineligible". Are there any existing widgets or code snippets available to achieve this functio ...

javascriptcssdictionarykmlboundary

What is the proper way to correctly position a radio button on a webpage?

http://jsfiddle.net/BD8j2/ I am attempting to position a radio button next to an arrow image, but it seems to be relocating elsewhere inexplicably. My intention is to have the radio button positioned between the arrow and the word "Masculino." The radio ...

csshtml

What is the best way to stack an absolutely-positioned element within the children of a sibling element?

I am currently utilizing the vue-slick-carousel package to enhance my website. Within this carousel, there are three key elements that I need to interact with. The first element is an image containing a character identified by the class slide__person. The ...

htmlcssvue.jsstylesz-index

Any tips on getting rid of the spacing between my Bootstrap 4 links?

I am facing an issue with implementing Bootstrap 4 inline-block links. There seems to be an invisible margin between them that I cannot remove. Screenshot: View the Codepen example here. Code: <div> <!-- There shoud be NO MARGIN between th ...

csstwitter-bootstrapbootstrap-4

difficulties with struts2 user interface elements

Can anyone explain why the s:textfield is being positioned at the bottom when inserted among other HTML elements within a form? And what steps can be taken to resolve this issue? <label><span class="required">*</span>First name</label ...

htmlcssstruts2

Ways to retrieve base64 encoded information from an image within an HTML document

On my registration form, users have the option to select an avatar from 2 choices: Select a default avatar Upload their own custom avatar This is how I have implemented it in my HTML page. <img id="preview" src="img/default_1.png"> The chosen av ...

javascripthtmlimagebase64

What is the best way to display a default image when a specific image file cannot be located?

Is there a way to request images for user profile photos from an Amazon S3 bucket, and if the image file is not found for a user, automatically redirect to an alternate default image file for the profile photo? If so, how can I implement this using Amazo ...

htmlamazon-web-servicesamazon-s3

"Struggling to design a hover drop-down menu using HTML and CSS. Need some assistance

Currently, I am attempting to craft a drop-down menu using HTML and CSS with a hover effect. Below is the HTML code that I have been working on: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tran ...

htmlcss

Increase the padding at the top and bottom of the div border

I am facing a problem with CSS shrinkwrapping. Here is the simple code snippet... <!doctype html> <html lang="en-US"> <head> <title>Device Activation</title> <meta charset="utf-8"> <style ...

javascriptcsshtmlmargin

Click event on a Bootstrap select box with jQuery does not fire on iOS devices

I am facing an issue with my Bootstrap select box on iOS devices. The problem is that I have an option inside the select box triggering a jQuery action on click, but it doesn't work on iOS. Html: <div class="form-group"> <label for="sel ...

jqueryhtmliostwitter-bootstrapresponsive-design

Issues with CSS positioning are not being resolved in Chrome

I set up a Wordpress website and I'm trying to display two vertical banners outside of the main container. My CSS code seems to work fine on Firefox and IE, but on Chrome only the left banner is showing up. Any suggestions on what might be causing thi ...

csswordpressgoogle-chromeposition

Adjusting the range input value in AngularJS

The value and position of the range should dynamically change based on the parameter without the need for the parameter to be manually updated HTML: <body ng-app="myApp"> <div ng-controller="MyRngCtrl"> Param:{{param}} </d ...

javascripthtmlangularjs

How to delete a CSS class from SAPUI5 aggregation items

I have a fragment containing an XML view with a side navigation menu <SideNavigation id="sideNavigation" expanded="false"> <item> <NavigationList expanded="false"> <NavigationListItem text="Start" icon="sap-ico ...

javascriptcsssapui5

Flexbox allows all elements to fall in line in a single row

I'm trying to create a basic counter program. I have placed the label and buttons inside a div container and used flexbox styling on them. However, despite setting the display of the label to block and adding a line break after it, the buttons and lab ...

cssflexbox