When you press one button, both react. How to fix it?

* { font-family: "Open Sans"; margin: 0; padding: 0; } html, body { background: #FFF3EB; } header { background: #333333; color: #ededed; box-shadow: 0px 2px 2px rgba(130, 130, 130, 0.5); line-height: 40px; text-align: center; height: 40px; width: 100%; } header > span { position: absolute; } header > address { position: absolute; } header > address:first-child { margin-left: 15px; } .header-button { background: rgba(63, 63, 63, 1); border-radius: 6px; border: 1px solid #202020; border-bottom: 4px solid #202020; margin-top: 2px; transition-duration: 0.1s; width: 36px; height: 36px; } .header-button > span { display: block; border-radius: 6px; border: 1px solid rgba(180, 180, 180, 0.5); height: 28px; width: 32px; } .header-button:hover { background: rgba(73, 73, 73, 255); cursor: pointer; } .header-button:active { background: rgba(73, 73, 73, 255); border-bottom: 1px solid #202020; } .header-button:active > span { padding-top: 1px; height: 29px; width: 32px; } 
 <!DOCTYPE html> <html> <head> <title>Code</title> <meta charset="utf-8"> </head> <body> <header> <address> <button class="header-button"> <span> <!--<img align="right" height="32" src="github_logo.png" --> </span> </button> <button class="header-button"> <span> <!--<img align="right" height="32" src="mail_logo.png"> --> </span> </button> </address> <span>TEXT</span> </header> </body> </html>

    1 answer 1

     .header-button { vertical-align: top; }

    Example:

     * { font-family: "Open Sans"; margin: 0; padding: 0; } html, body { background: #FFF3EB; } header { background: #333333; color: #ededed; box-shadow: 0px 2px 2px rgba(130, 130, 130, 0.5); line-height: 40px; text-align: center; height: 40px; width: 100%; } header > span { position: absolute; } header > address { position: absolute; } header > address:first-child { margin-left: 15px; } .header-button { background: rgba(63, 63, 63, 1); border-radius: 6px; border: 1px solid #202020; border-bottom: 4px solid #202020; margin-top: 2px; transition-duration: 0.1s; width: 36px; height: 36px; vertical-align: top; } .header-button > span { display: block; border-radius: 6px; border: 1px solid rgba(180, 180, 180, 0.5); height: 28px; width: 32px; } .header-button:hover { background: rgba(73, 73, 73, 255); cursor: pointer; } .header-button:active { background: rgba(73, 73, 73, 255); border-bottom: 1px solid #202020; } .header-button:active > span { padding-top: 1px; height: 29px; width: 32px; } 
     <!DOCTYPE html> <html> <head> <title>Code</title> <meta charset="utf-8"> </head> <body> <header> <address> <button class="header-button"> <span> <!--<img align="right" height="32" src="github_logo.png" --> </span> </button> <button class="header-button"> <span> <!--<img align="right" height="32" src="mail_logo.png"> --> </span> </button> </address> <span>TEXT</span> </header> </body> </html>