CODEWITHSUNDEEP
htmlcssbutton
Naor
Naor

Reputation: 357

CSS <button> to look exactly like <a> displays wrong (offset to bottom)

This is a page example: link

You can see the WeChat widget (the green one) is a <button> type while all the other links are <a href> type, and I added the button class="remove-btn-styles" so it will look like them.

You can see everything in the F12 that it have the same CSS as the <a> tags, and yet the button is a bit offset to the bottom than the <a> tags.

Some code (Look at the button at the bottom):

<div class="luxery-logos-tiles">
    <li class="inner-original-icon-li">
        <a href="1" target="_blank" rel="noopener noreferrer">
            <img src="/images/luxeryLogos/facebook.png" alt="SocialMediaFacebook">
        </a>
    </li>
    <li class="inner-original-icon-li">
        <a href="21321" target="_blank" rel="noopener noreferrer">
            <img src="/images/luxeryLogos/instagram.png" alt="SocialMediaInstagram">
        </a>
    </li>
    <li class="inner-original-icon-li">
        <a href="1232131" target="_blank" rel="noopener noreferrer">
            <img src="/images/luxeryLogos/youtube.png" alt="SocialMediaYoutube">
        </a>
    </li>
    <li class="inner-original-icon-li">
        <button class="remove-btn-styles">
            <img src="/images/luxeryLogos/weChat.png" alt="SocialMediaWeChat">
        </button>
    </li>
</div>

And CSS:

.luxery-logos-tiles {
    margin-top: 5vh;
    margin-bottom: 5vh;
}


.inner-original-icon-li {
    margin: 15px;
    border-radius: 50%;
    display: inline-block;
    transition: all .5s;
}

.inner-original-icon-li a, .inner-original-icon-li button {
    display: inline-block;
    padding: 1.3em;
    padding-bottom: 1em;
    transition: all .5s;
}

.inner-original-icon-li a img, .inner-original-icon-li button img {
    display: block;
    transition: all .5s;
}

.inner-original-icon-li a:hover img, .inner-original-icon-li button:hover img {
    transform: scale(0.8);
}

.inner-original-icon-li a img, .inner-original-icon-li button img {
    width: 60px;
    height: 60px;
}

.remove-btn-styles {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: none !important;
}

What am I missing?

Upvotes: 1

Views: 92

Answers (2)

Kevin Shuguli
Kevin Shuguli

Reputation: 1749

I think <a>tag has no it's real size. so it changes to its content size. In your case, its size is image size in it.

But, button has its real size.

So, button and <a> looks as the same, but in fact, <a> is smaller than button. So they aligned to top and button is a bit offset to the bottom.

I think you can fix this issue by adding this css code.

.luxery-logos-tiles {
    display: flex;
    justify-content: center;
}

Fun-And-Solution

Upvotes: 1

Zsolt Meszaros
Zsolt Meszaros

Reputation: 23161

Actually, the button is the correct one. If you remove the display: block from the images and fix the padding around it by setting it the same on every side, they all look the same:

.inner-original-icon-li a, .inner-original-icon-li button {
  display: inline-block;
  /* same padding on every side */
  padding: 1.3em;
  transition: all .5s;
}

.inner-original-icon-li a img, .inner-original-icon-li button img {
  /* display: block; */
  transition: all .5s;
}

enter image description here

Upvotes: 2

Related Questions