Creating a button that adjusts its size proportionally to the page and surrounding elements, all without relying on positioning

Question

Creating a button that adjusts its size proportionally to the page and surrounding elements, all without relying on positioning

I'm fairly new to creating websites with CSS and HTML, and I'm currently working on a project about my time in China. The main issue I'm facing right now is aligning a button with my other contact icons and ensuring it scrolls correctly with the rest of the page. I came across a CSS style for the button that I really like, but I'm struggling to make it the same height as the other icons and center it horizontally. I've tried adjusting margins, but I can't seem to get it right. Changing the position just seems to mess with the scaling. If anyone could help me out with this, I'd really appreciate it. I can provide a js fiddle with the code as well.

Here is the HTML & CSS code:

.Social {
  margin-top: 1%;
  margin-left: 29.3%;
}

.Pop {
  margin-left: 0.8%;
  margin-right: 0.8%;
  width: 6%;
  transition: all .3s ease;
  -moz-transition: all .3 ease;
  -ms-transition: all .3s ease;
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
}

.Pop:hover {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -o-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand')";
  filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand');
}

.button {
  background-color: #4CAF50;
  /* Green */
  border: none;
  color: white;
  margin-left: 2%;
  padding: 1% 4%;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 80%;
  font-family: "eraslight";
  -webkit-transition-duration: 0.4s;
  /* Safari */
  transition-duration: 0.4s;
  cursor: pointer;
}

.button5 {
  background-color: white;
  color: black;
  border: 2px solid #555555;
}

.button5:hover {
  background-color: #555555;
  color: white;
}

<div class="Social">
  <img alt="snap circle" class="Pop" src="https://image.ibb.co/cHB5SU/SnapPop.png">

  <img alt="Insta circle" class="Pop" src="https://image.ibb.co/eOtkSU/InstaPop.png">

  <img alt="Wechat circle" class="Pop" src="https://image.ibb.co/dppEMp/WePop.png">

  <img alt="Linkedin circle" class="Pop" src="https://image.ibb.co/effAu9/Linkedin_Pop.png">

  <img alt="Gmail circle" class="Pop" src="https://image.ibb.co/movbZ9/GmailPop.png">

  <button class="button button5"><h2>Résumé</h2></button>
</div>

html css button position alignment

Answer 1

Answer №1

To establish a specific height for the containing div and have its children inherit it, you can apply the following CSS properties to the container: display: flex; and align-items: center;

    .Social {
      display: flex;
      align-items: center;
      height: 40px;
      margin-top: 1%;
      margin-left: 29.3%;
    }

    .Social img, .Social button {
      display: inline-block;
      width: auto;
      height: inherit;
    }

    .Pop {
      margin-left: 0.8%;
      margin-right: 0.8%;
      width: 6%;
      transition: all .3s ease;
      -moz-transition: all .3s ease;
      -ms-transition: all .3s ease;
      -webkit-transition: all .3s ease;
      -o-transition: all .3s ease;
    }

    .Pop:hover {
      -moz-transform: scale(1.1);
      -webkit-transform: scale(1.1);
      -o-transform: scale(1.1);
      -ms-transform: scale(1.1);
      transform: scale(1.1);
      -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand')";
      filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand');
    }

    .button {
      background-color: #4CAF50;
      /* Green */
      border: none;
      color: white;
      margin-left: 2%;
      padding: 0 4%;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 80%;
      font-family: "eraslight";
      -webkit-transition-duration: 0.4s;
      /* Safari */
      transition-duration: 0.4s;
      cursor: pointer;
    }

    .button5 {
      background-color: white;
      color: black;
      border: 2px solid #555555;
    }

    .button5:hover {
      background-color: #555555;
      color: white;
    }

    <div class="Social">
      <img alt="snap circle" class="Pop" src="https://image.ibb.co/cHB5SU/SnapPop.png">

      <img alt="Insta circle" class="Pop" src="https://image.ibb.co/eOtkSU/InstaPop.png">

      <img alt="Wechat circle" class="Pop" src="https://image.ibb.co/dppEMp/WePop.png">

      <img alt="Linkedin circle" class="Pop" src="https://image.ibb.co/effAu9/Linkedin_Pop.png">

      <img alt="Gmail circle" class="Pop" src="https://image.ibb.co/movbZ9/GmailPop.png">

      <button class="button button5">Résumé</button>
    </div>

The HTML structure remains unchanged, except for the removal of the unnecessary <h2> tags in your <button> text, which could affect vertical alignment in some browsers.

Answer 2

To establish a specific height for the containing div and have its children inherit it, you can apply the following CSS properties to the container: display: flex; and align-items: center;

    .Social {
      display: flex;
      align-items: center;
      height: 40px;
      margin-top: 1%;
      margin-left: 29.3%;
    }

    .Social img, .Social button {
      display: inline-block;
      width: auto;
      height: inherit;
    }

    .Pop {
      margin-left: 0.8%;
      margin-right: 0.8%;
      width: 6%;
      transition: all .3s ease;
      -moz-transition: all .3s ease;
      -ms-transition: all .3s ease;
      -webkit-transition: all .3s ease;
      -o-transition: all .3s ease;
    }

    .Pop:hover {
      -moz-transform: scale(1.1);
      -webkit-transform: scale(1.1);
      -o-transform: scale(1.1);
      -ms-transform: scale(1.1);
      transform: scale(1.1);
      -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand')";
      filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand');
    }

    .button {
      background-color: #4CAF50;
      /* Green */
      border: none;
      color: white;
      margin-left: 2%;
      padding: 0 4%;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 80%;
      font-family: "eraslight";
      -webkit-transition-duration: 0.4s;
      /* Safari */
      transition-duration: 0.4s;
      cursor: pointer;
    }

    .button5 {
      background-color: white;
      color: black;
      border: 2px solid #555555;
    }

    .button5:hover {
      background-color: #555555;
      color: white;
    }

    <div class="Social">
      <img alt="snap circle" class="Pop" src="https://image.ibb.co/cHB5SU/SnapPop.png">

      <img alt="Insta circle" class="Pop" src="https://image.ibb.co/eOtkSU/InstaPop.png">

      <img alt="Wechat circle" class="Pop" src="https://image.ibb.co/dppEMp/WePop.png">

      <img alt="Linkedin circle" class="Pop" src="https://image.ibb.co/effAu9/Linkedin_Pop.png">

      <img alt="Gmail circle" class="Pop" src="https://image.ibb.co/movbZ9/GmailPop.png">

      <button class="button button5">Résumé</button>
    </div>

The HTML structure remains unchanged, except for the removal of the unnecessary <h2> tags in your <button> text, which could affect vertical alignment in some browsers.

Answer 3

Answer №2

To adjust the vertical alignment of all your inline elements, use the vertical-align property.

img {
    ...
    vertical-align: middle;
}
.button {
    ...
    vertical-align: middle;
}

If you want your .button to match its neighboring elements better, consider removing the h2 tags, setting a fixed padding size, and using a fixed font size.

.button {
    font-size: 14px;
    padding: 5px;
    ...
}

<button class="button button5">Résumé</button>

Answer 4

To adjust the vertical alignment of all your inline elements, use the vertical-align property.

img {
    ...
    vertical-align: middle;
}
.button {
    ...
    vertical-align: middle;
}

If you want your .button to match its neighboring elements better, consider removing the h2 tags, setting a fixed padding size, and using a fixed font size.

.button {
    font-size: 14px;
    padding: 5px;
    ...
}

<button class="button button5">Résumé</button>

Creating a button that adjusts its size proportionally to the page and surrounding elements, all without relying on positioning

Answer №1

Answer №2

Similar questions

Show a picture on top of another picture

Z-Index Problem with PureCSS Horizontal Scrollable Menu

Crafting an interactive form

What could be the reason for Python requests giving me a different text output compared to when I manually visit the website?

Customize Google Chrome to display a vibrant splash screen instead of a boring white blank page when

Is it possible to include aria-controls in an anchor tag?

What is the best way to update the text on buttons once they've been clicked for a variety of buttons

HTML min-width is not being considered by the media query breakpoint

Google API integration in Chrome Extension Manifest

The issue of flickering while scrolling occurs when transitioning to a new page in Angular

Styling menus with CSS

Ensure that each of the two divs maintains a 16:9 aspect ratio, and utilize one div to fill any remaining empty space through the

Darkening the background of HTML and CSS text to black

Can I create personalized animations using Compass?

Creating a mechanism that fetches web links and automatically substitutes the URL with the corresponding title of the webpage

Updating HTML5 localStorage value upon a click

Tips for implementing the same autocomplete feature across multiple form fields

Using the loop function within HTML in JavaScript with React

What is the optimal resolution for a background image in a Cordova app?

Steps to create a custom function that can manage numerous onclick actions to toggle the visibility of a specific field