求助：实现WhatsApp按钮Hover时变长加文本且右侧贴页左侧圆角

第一步：修改HTML结构 #

在按钮内添加文本元素，默认隐藏，hover时显示：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<a href="#" class="float" target="_blank">
   <i class="fa fa-whatsapp my-float"></i>  
   <span class="float-text">Click here and talk with us!</span>
</a>

第二步：调整CSS样式 #

修改原有样式，实现hover展开、右侧贴边、左侧圆角的效果：

.float{
    position:fixed;
    width:70px;
    height:70px;
    bottom:40px;
    right:0; /* 让按钮右侧贴合页面边缘 */
    background-color:#25d366;
    color:#FFF;
    border-radius:70px 0 0 70px; /* 左侧圆角，右侧直角 */
    font-size:40px;
    box-shadow: 2px 2px 3px #999;
    z-index:100;
    transition: all 0.3s ease; /* 平滑过渡动画 */
    display: flex; /* 用flex布局让图标和文本横向排列 */
    align-items: center;
    padding-left: 15px; /* 给图标预留左侧间距 */
}

.my-float{
    margin-top:0; /* 去掉原有的margin-top，用flex实现垂直居中 */
}

.float-text{
    opacity:0; /* 默认隐藏文本 */
    margin-left:15px;
    font-size:16px;
    white-space: nowrap; /* 防止文本换行 */
    transition: opacity 0.3s ease;
}

/* hover状态样式 */
.float:hover{
    width:280px; /* 展开后的宽度，可根据文本长度自行调整 */
}

.float:hover .float-text{
    opacity:1; /* hover时显示文本 */
}

关键修改说明： #

• right:0：直接让按钮右侧完全贴合页面边缘
• border-radius:70px 0 0 70px：实现左侧圆角、右侧直角的特殊造型
• display:flex：让图标和文本横向居中对齐，布局更灵活自然
• 加入transition属性：让hover状态的宽度变化、文本显示/隐藏过程更平滑，避免生硬跳转
• .float-text默认透明隐藏，hover时通过opacity显示，配合宽度变化实现展开效果

内容的提问来源于stack exchange，提问作者Awa