Custom CSS button not responsive

I have created a CSS button but it is not responsive. How do I make it so that it's responsive? (I have little knowledge in coding)

This is the CSS code I'm using:

.checkoutbutton { font-family: roboto; font-size: 18px; color: hsl(0,100%,0%); background-color: hsl(48,100%, 50%); font-weight: 700; font-style: normal; text-align: center; width: 100%; text-decoration: none; padding: 21px 40px; margin: 10px; border: 2px; border-style: none; }

.checkoutbutton:hover { color: #000; background-color: hsl(50, 100%, 50%); text-decoration: none; border: 2px; border-style: solid; border-color: hsl(50, 100%, 50%); }