How can I align my two like and dislike buttons on the same line? - Html

CyberFlame
February 16, 2023
243 views
0 votes
2 Answers

It seems very easy to do but I don’t find a good solution. I want to have my two like and dislike buttons (that have almost the same properties) on the same line instead of having them on two different lines.
The thing is that there is also an animation that makes their size bigger when the user puts his cursor over them which seems to create some problems with the code I wrote.

div.post{
    background-color: #DBDBDB;
}

div.post{
    background-color: #DBDBDB;
}

/* dislike button */

.dislike{
    width: 35px;
    height: 35px;
    border-radius: 50px;
    background-color: #DB4349;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.5s;
    overflow: hidden;
    text-decoration: none;
}

.dislike:hover{
    width: 100px;
    transition: 0.5s;
}

.dislikeIcon{
    background-size: contain;
    padding-top: 3px;
    width: 20px;
    height: 20px;
}

.dislikeText{
    display: none;
    margin-left: 10px;
    text-decoration: none;
    font-family: amble-bold, sans-serif;
    color: white;
    text-transform: uppercase;
}
.dislike:hover > #dislikeText{
    display: flex;
    transition: 0.5s;
    transition-delay: 1s;
}

/* like button */

.like{
    width: 35px;
    height: 35px;
    border-radius: 50px;
    background-color: #34aacf;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.5s;
    overflow: hidden;
    text-decoration: none;
}

.like:hover{
    width: 100px;
    transition: 0.5s;
}

.likeIcon{
    background-size: contain;
    padding-top: 3px;
    width: 20px;
    height: 20px;
}

.likeText{
    display: none;
    margin-left: 10px;
    text-decoration: none;
    font-family: amble-bold, sans-serif;
    color: white;
  text-transform: uppercase;
}
.like:hover > #likeText{
    display: flex;
    transition: 0.5s;
    transition-delay: 1s;
}

<!DOCTYPE html>
<html>
<body>
  <div class="post">
                <img>
                <p>
                    username
                </p>
                <p>
                    this is a placeholder text
                </p>
                <a class="dislike" href="#disliked">
                    <img src="dislikeIcon.png" class="dislikeIcon" draggable="false">
                    <p class="dislikeText" id="dislikeText">dislike</p>
                </a>

                <a class="like" href="#liked">
                    <img src="likeIcon.png" class="likeIcon" draggable="false">
                    <p class="likeText" id="likeText">like</p>
                </a>
            </div>
</body>
</html>

Tags: css html

Answers

Just change your like and dislike button classes from display: flex to display: inline-flex; as below.

More on inline vs block elements from Samantha Haming and a nice video explaining the same from Kevin Powell

div.post {
  background-color: #DBDBDB;
}

div.post {
  background-color: #DBDBDB;
}


/* dislike button */

.dislike {
  width: 35px;
  height: 35px;
  border-radius: 50px;
  background-color: #DB4349;
  display: inline-flex; /*changed this from display: flex */
  align-items: center;
  justify-content: center;
  transition: 0.5s;
  overflow: hidden;
  text-decoration: none;
}

.dislike:hover {
  width: 100px;
  transition: 0.5s;
}

.dislikeIcon {
  background-size: contain;
  padding-top: 3px;
  width: 20px;
  height: 20px;
}

.dislikeText {
  display: none;
  margin-left: 10px;
  text-decoration: none;
  font-family: amble-bold, sans-serif;
  color: white;
  text-transform: uppercase;
}

.dislike:hover>#dislikeText {
  display: flex;
  transition: 0.5s;
  transition-delay: 1s;
}


/* like button */

.like {
  width: 35px;
  height: 35px;
  border-radius: 50px;
  background-color: #34aacf;
  display: inline-flex; /*changed this from display: flex */
  align-items: center;
  justify-content: center;
  transition: 0.5s;
  overflow: hidden;
  text-decoration: none;
}

.like:hover {
  width: 100px;
  transition: 0.5s;
}

.likeIcon {
  background-size: contain;
  padding-top: 3px;
  width: 20px;
  height: 20px;
}

.likeText {
  display: none;
  margin-left: 10px;
  text-decoration: none;
  font-family: amble-bold, sans-serif;
  color: white;
  text-transform: uppercase;
}

.like:hover>#likeText {
  display: flex;
  transition: 0.5s;
  transition-delay: 1s;
}

<div class="post">
  <img>
  <p>
    username
  </p>
  <p>
    this is a placeholder text
  </p>
  <a class="dislike" href="#disliked">
    <img src="dislikeIcon.png" class="dislikeIcon" draggable="false">
    <p class="dislikeText" id="dislikeText">dislike</p>
  </a>

  <a class="like" href="#liked">
    <img src="likeIcon.png" class="likeIcon" draggable="false">
    <p class="likeText" id="likeText">like</p>
  </a>
</div>

Wrap buttons with div with flexbox. And this solution give you easy way to make gap between buttons

 <div class="buttons">
     <a class="dislike" href="#disliked">
         <img src="dislikeIcon.png" class="dislikeIcon" draggable="false">
         <p class="dislikeText" id="dislikeText">dislike</p>
    </a>

       <a class="like" href="#liked">
       <img src="likeIcon.png" class="likeIcon" draggable="false">
       <p class="likeText" id="likeText">like</p>
    </a>
</div>

.buttons {
  display: flex; 
  gap: 10px
}

https://codepen.io/rachkovartem/pen/gOdppdM

Please signup or login to give your own answer.

Click here to cancel reply.

How can I align my two like and dislike buttons on the same line? – Html

Answers