BLOB HOVER EFFECTS IN THE BUTTON

alcafloes · ‎12-21-2024

Can anyone help me? How to add a blob hover effects in my button? I use DAWN Theme! I created a custom button using custom-liquid. And Its totally Good for me I just only want to add BLOB HOVER EFFECT when the cursor put in the button. I also attach some image! The Blob effects in the button is what I really want! Here is my custom-liquid code:

<div class="button-container" style="display: inline-flex; align-items: center;">

  <a href="#" style="text-decoration: none;">
    <div style="display: flex; align-items: normal; background-color: white; border-radius: 0px; position: relative; overflow: hidden; width: 172px; box-shadow: 0 4px 13px rgba(249, 163, 146, 0.5); transition: transform 0.3s; padding: 6px;">
      <button class="custom-button" style="padding-left: 28px; font-family: Roboto, sans-serif; color: #000; background: none; border: none; cursor: pointer; font-weight: 700; font-size: 12px;">
        Salons
      </button>
      <span class="arrow" style="background-color: #F9A392; border-radius: 0px; color: #fff; display: flex; align-items: center; justify-content: center; padding: 14px 20px; margin-left: 29px; transition: background-color 0.3s, color 0.3s;">
        ➔
      </span>
      <div class="cloud-effect" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgba(249, 163, 146, 0.5); opacity: 0; transition: opacity 0.5s;"></div>
    </div>
  </a>

  <a href="#" style="text-decoration: none; margin-left: 10px;">
    <div style="display: flex; align-items: center; background-color: white; border-radius: 0px; position: relative; overflow: hidden; width: 255px; border: 2px solid #e4e4e4; transition: transform 0.3s; height: 68px;">
      <button class="custom-button" style="padding-left: 62px; font-size: 12px; font-family: Roboto, sans-serif; color: #000; background: none; border: none; cursor: pointer; font-weight: 700;">
        Appointment Booking
      </button>
      <span class="phone-icon" style="margin-left: -145px; transform: rotate(32deg); color: black;">🕽</span>
    </div>
  </a>
</div>

<style>
  .button-container div:hover {
    transform: scale(1.05);
  }

  .button-container div:hover .cloud-effect {
    opacity: 1;
  }

  .button-container a div:hover .custom-button {
    background-color: #F9A392; /* Button background color change */
    color: white; /* Change text color to white */
  }

  .button-container a div:hover .arrow {
    background-color: white; /* Arrow background color change */
    color: #F9A392; /* Arrow color change */
  }
</style>

From my research this is the code for the blob button! But I dont like the button since I already the hover effects only what I want.

<!DOCTOTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Salons</title>
    <!----CSS link---->
    <link rel="stylesheet" href="style.css"
</head>
<body>

  <div class="buttons">
    <button class="blob-btn">
      Salons
      <span class="blob-btn_inner"></span>
        <span class="blob-btn_blobs">
          <span class="blob-btn_blobs">
          <span class="blob-btn_blobs">
          <span class="blob-btn_blobs">
          <span class="blob-btn_blobs">
        <span class="blob-btn_blobs">
      </span>   
    </button>
  </div>
    
</body>

*, *:before, *:after{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    background: #FFFFFF;
    font-family: 'Roboto', sans-serif;
}
.blob-btn{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
    padding: 20px 46px;
    margin-bottom: 30px;
    text-alig: center;
    text-transfor: none;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: bold;
    background-color: transparent;
    outline: none;
    border: none;
    transition: color 0.5s;
    cursor: pointer;
    border-radius: 0px;
    z-index: 1;
}
.blob-btn:before;{
    content: "";
    z-index: 1;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border: 2px solid #FFFFFF;
    border-radius: 0px;
}
.blob-btn:after{
    content: "";
    z-index: -2;
    position: absolute;
    left: 3px;
    top: 3px;
    width: 100%;
    height: 100%
    transition: all 0.3s 0.2s;
    border-radius: 0px;
}
.blob-btn:hover{
    color: #F9A392;
    border-radius: 0px;
}
.blob-btn:hover:after{
    transition: all 0.3s;
    left: 0;
    top: 0;
    border-radius: 0px;
}
.blob-btn_inner{
    z-index: 1;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 0px;
    background: #FFFFFF;
}
.blob-btn_blobs{
    position: relative;
    display: block;
    height: 100%;
}
.blob-btn_blob{
    position: absolute;
    top: 2px;
    width: 25%;
    height: 100%;
    background: #F9A392;
    border-radius: 100%;
    transform: translate3d(0, 150%, 0) scale(1.7);
    transition: transform 0.45s;
}
.blob-btn_blob:nth-child(1){
    left: 0%;
    transition-delay: 0s;
}
.blob-btn_blob:nth-child(2){
    left: 30%;
    transition-delay: 0.08s;
}
.blob-btn_blob:nth-child(3){
    left: 60%;
    transition-delay: 0.16s;
}
.blob-btn_blob:nth-child(4){
    left: 90%;
    transition-delay: 0,24s;
}
.blob-btn:hover .blob-btn_blob{
    transform: translateZ(0) scale(1.7);
}

THANK YOU IN ADVANCE 🙂

LizHoang · ‎12-21-2024

Hi @alcafloes

Can you share with me the store URL and CSS hover link that you have searched please?

Thank you

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Check our Joy Rewards & Loyalty Program

alcafloes · ‎12-21-2024

Hello, sure! here is the link https://div.to/webdeasy/top-20-css-buttons-animations-f41 change the "div" in the url to "dev" since I there's an error when I sent.

LizHoang · ‎12-23-2024

Hi @alcafloes

I have checked and the page is 404 error page, can you help me double check?

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Check our Joy Rewards & Loyalty Program

BLOB HOVER EFFECTS IN THE BUTTON

BLOB HOVER EFFECTS IN THE BUTTON

Community Blog Articles