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:[email protected]?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>

CodePudding user response：

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:[email protected]?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>

CodePudding user response：

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.