我的按钮在浏览器中呈现的效果不一样？

Question

图形按钮：

我正在尝试复制这个我在网站上找到的图形按钮。然而，与网站不同的是，我想用 CSS 来制作它，并让它在所有现有和流行的浏览器上运行。请参阅演示：https://codepen.io/Alix-Blaine/pen/wvLwxrN。

使用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>

结果：

铬

火狐

Answer 1

我会使用矢量，例如.svg，来实现相同的整体结果并保持清晰。像这样：

<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" />
    <rect
       x="45.591473"
       y="51.345737"
       width="297.45117"
       height="102.24884"
       id="rect18" />
    <rect
       x="49.575195"
       y="60.198448"
       width="279.3031"
       height="84.986046"
       id="rect17" />
  </defs>
  <sodipodi:namedview
     id="namedview17"
     pagecolor="#ffffff"
     bordercolor="#000000"
     borderopacity="0.25"
     inkscape:showpageshadow="2"
     inkscape:pageopacity="0.0"
     inkscape:pagecheckerboard="0"
     inkscape:deskcolor="#d1d1d1"
     inkscape:zoom="10.245981"
     inkscape:cx="21.179036"
     inkscape:cy="9.2231284"
     inkscape:window-width="1920"
     inkscape:window-height="974"
     inkscape:window-x="-11"
     inkscape:window-y="-11"
     inkscape:window-maximized="1"
     inkscape:current-layer="svg17" />
  <rect
     style="display:inline;fill:#666695;fill-opacity:1;stroke:#000000;stroke-width:0.526527"
     id="rect20"
     width="66.461639"
     height="20.436222"
     x="0.26530051"
     y="0.30037344"
     inkscape:label="rect20" />
  <path
     d="M 0.00265149,0.03543588 C 2.3997226,1.103814 1.2578846,4.0660316 1.5494423,6.111032 c 0.038134,4.430444 0.064893,8.860978 0.088974,13.291518 21.2684991,0.01725 42.5369981,0.03451 63.8054971,0.05176 0,-6.00452 0,-12.0090405 0,-18.0135608 0.456894,-0.2027749 1.591792,-1.96109364 1.549498,-1.01858235 0,6.86082175 0,13.72164315 0,20.58246515 -22.324502,0 -44.649004,0 -66.97350624,0 C 0.01415367,14.0149 0.00840258,7.0251679 0.00265149,0.03543588 Z"
     fill="#6b6973"
     id="path3"
     style="display:inline;stroke-width:0.128795;fill:#292833;fill-opacity:1" />
  <path
     d="M -0.00743854,9.2933662e-4 66.997645,1.68604e-4 C 66.485559,0.47038005 65.498313,1.5512629 65.498313,1.5512629 64.056495,1.7539709 2.6794333,1.7514905 1.6690757,1.7124055 c 0,0 -1.67651424,-1.49780952 -1.67651424,-1.71147616338 z"
     fill="#ababab"
     id="path4"
     style="display:inline;stroke-width:0.128795;fill:#aaaaaa;fill-opacity:1"
     sodipodi:nodetypes="ccccc" />
  <path
     d="M 0.00265149,0.03543588 C 0.58814053,0.55946512 1.1232929,1.1364982 1.6599176,1.7095289 c -0.00128,5.8940224 -0.00255,11.7880451 -0.00383,17.6820671 -0.5511443,0.531928 -1.10228854,1.063855 -1.65343281,1.595783 -1.1e-6,-6.983981 -2.2e-6,-13.9679621 -3.3e-6,-20.95194312 z"
     fill="#33334a"
     id="path5"
     style="display:inline;stroke-width:0.128795;fill:#595972;fill-opacity:1" />
  <text
     xml:space="preserve"
     id="text19"
     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:93.3333px;line-height:1.2;font-family:'Times New Roman';-inkscape-font-specification:'Times New Roman, ';white-space:pre;shape-inside:url(#rect19);display:inline;fill:#ffffff;stroke:none;stroke-width:4.15748"
     transform="matrix(0.12984378,0,0,0.12775574,-2.1493329,-1.2609385)"><tspan
       x="43.820312"
       y="123.89016"
       id="tspan1">Twitter</tspan></text>
</svg></a>
</main>