The text, background and spacing match, but a copied button still feels wrong. Before changing its shadow, check whether you accidentally turned four different corner radii into one.

This is a small shape error that is easy to miss when translating a reference into a reusable component. It is also easy to reproduce without installing a tool.

Reproduce the difference

Paste this into an HTML file. Both buttons have the same dimensions, border, font and colors. Only the radius changes:

<div class= "examples" > <button class= "action reference" > Continue </button> <button class= "action uniform" > Continue </button> </div> <style> .examples { display : flex ; flex-wrap : wrap ; gap : 24px ; } .action { box-sizing : border-box ; width : 312px ; height : 100px ; border : 2px solid #4937ad ; background : #6550df ; color : white ; font : 600 25px system-ui , sans-serif ; } .reference { border-radius : 32px 8px 24px 4px ; } .uniform { border-radius : 16px ; } </style>

Enter fullscreen mode

Exit fullscreen…