I can't connect href link to email and can't adjust the the elements due to themselves

Question

I totally googled the email part and don't know it normally works like that or Nah

I tried with flex but still couldn't fix it out. I can fix with margin and padding, but that's like cheating.

As you can see from screenshot, Email button and text is not in line, and it's not in line with a button. Other than that, I couldn't connect a link to the button. It's just like a link on top of the button

body {
  box-sizing: border-box;
  text-align: center;
  background: #23252C;
}

.desc {
  color: #DCDCDC;
}

#title {
  color: #F3BF99;
}

#name {
  color: #FFFFFF;
}

.header {
  color: #F5F5F5;
}

#content {
  position: absolute;
  width: 22em;
  height: 27em;
  top: 2.6em;
  /* margin-left: 5em; */
  align-content: center;
  border-radius: 1em;
  left: 100px;
  background: #1A1B21;
  margin-left: 25em;
  /* margin: 0 auto; */
}

.icon {
  padding: 1em;
}

header {
  font-size: larger;
  color: antiquewhite;
}

#email-contact {
  text-decoration: none;
}

.email-button {
  padding: 0.2em;
}

button {
  width: 25%;
  height: 6%;
}

<div id='content'>
  <h1 id='name'>Yusif Ahmedov</h1>
  <button id="email">
          <img className='email-button' src={logo3} alt='email-icon'/>
          <a className='email-button' id='email-contact' href = "mailto:ahmedovyusif8785@gmail.com?subject = subject text">Email</a>
        </button>
  <button id="linkedin"></button>
  <h2 id='title'>Front-End Developer</h2>
  <header className='header' id="about-header">About</header>
  <p className='desc' id="about">I am a front-end developer who is passionate about coding and engaging both creative and practical side of the human potential.</p>
  <header className='header' id="interests-header">Interests</header>
  <p className='desc' id="interests">Productivity articles, Time Management, Coffee, Music, Sports, Social Activities.</p>
  <footer>
    <a className='icon' href='https://github.com/PufflyMan'>
      <img src={logo1} alt='github-icon' />
    </a>
    <a className='icon' href='https://www.linkedin.com/in/yusif-ahmedov-7453ba21b/'>
      <img src={logo2} alt='linkedin-icon' />
    </a>
  </footer>
</div>

Answer 1

Remove your button css and the buttons will be on the same line.

Add text to the linkedin button and it will have height.

You can wrap the buttons in a hrefs or simply use a hrefs and style them like buttons. I think the second option is simplest in this case.

Answer 2

Just wrap and use a background image

body {
  box-sizing: border-box;
  text-align: center;
  background: #23252C;
}

.desc {
  color: #DCDCDC;
}

#title {
  color: #F3BF99;
}

#name {
  color: #FFFFFF;
}

.header {
  color: #F5F5F5;
}

#content {
  position: absolute;
  width: 22em;
  height: 27em;
  top: 2.6em;
  /* margin-left: 5em; */
  align-content: center;
  border-radius: 1em;
  left: 100px;
  background: #1A1B21;
  margin-left: 25em;
  /* margin: 0 auto; */
}

.icon {
  padding: 1em;
}

header {
  font-size: larger;
  color: antiquewhite;
}

#email-contact {
  text-decoration: none;
}

.email-button {
  height: 20px;
}

button {
  width: 25%;
  height: 6%;
}

#email {
  background: url(https://icon-library.com/images/email-white-icon/email-white-icon-1.jpg);
  background-size: 20px;
  background-repeat: no-repeat;
  background-color:rgb(239, 239, 239);
  padding: 2px;
}

<div id='content'>
  <h1 id='name'>Yusif Ahmedov</h1>
  <div>
    <button id="email">
          <a class='email-button' id='email-contact' href = "mailto:ahmedovyusif8785@gmail.com?subject = subject text">Email</a>
        </button>
    <button id="linkedin">LinkedIn</button>
  </div>
  <h2 id='title'>Front-End Developer</h2>
  <header class='header' id="about-header">About</header>
  <p class='desc' id="about">I am a front-end developer who is passionate about coding and engaging both creative and practical side of the human potential.</p>
  <header class='header' id="interests-header">Interests</header>
  <p class='desc' id="interests">Productivity articles, Time Management, Coffee, Music, Sports, Social Activities.</p>
  <footer>
    <a class='icon' href='https://github.com/PufflyMan'>
      <img src={logo1} alt='github-icon' />
    </a>
    <a class='icon' href='https://www.linkedin.com/in/yusif-ahmedov-7453ba21b/'>
      <img src={logo2} alt='linkedin-icon' />
    </a>
  </footer>
</div>