How to Fix Button Background-CodePudding

I'm having trouble with fixing my button in CSS. I have my button styled correctly, but for some reason the background behind the button itself is white still.

The code for my button & links, as I think it may be an issue with my links as well.

HTML:

<button >
<a href="#" target="_blank" tabindex="1">GitHub
</a></button></div>

CSS for button:

.s1btn a {
text-decoration: none;
color: white;
background-color: #f36dcb;
border: black 1px solid;
border-radius: 3px;
text-align: center;
padding-top: 3px;
padding-left: 3px;
padding-right: 3px;
}`

.s1btn a:hover {
background: #844421;
}

.s1btn a:active {
background: #b36b43;
padding-top: 3px;
}

CSS for all links:

links {
font-size: medium;
margin-left: auto;
padding-right: 50px;
color: #844421;
font-weight: 500;
}

.hLink {
margin-right: 30px;
}

` Screenshot of button:

Broken Button

I tried to comment out different sections of my button but that didn't help me target the problem to resolve the issue. I also tried to inspect the website itself, to figure out what was causing the background of my button to remain white.

CodePudding user response：

Browsers have default styles for buttons, a tags, etc. Your css is only selecting the <a> tag in the <button> tag, so no styles are being applied to the <button> itself. You can reset the styles of the button with this:

button {
    background: transparent;
    border: none;
    margin: 0;
    padding: 0;
}

You can see more on resetting the button styles here: https://css-tricks.com/overriding-default-button-styles/