如何创建一个一分为二的按钮，当鼠标悬停在其上时，按钮的一半消失，而另一半则增大

问题描述 投票：0回答：1

我正在开发一个网站，该网站将有一个“了解更多”按钮，该按钮分为两部分，一部分说“了解更多”，另一部分说“+”。当鼠标悬停在其上时，“了解更多”部分消失，“+”增大以占据按钮的整个空间，我通过使用 css 对按钮两半的宽度进行动画处理来做到这一点。问题在于，随着元素宽度的减小，文本会移动/换行。这是该按钮当前工作方式的 gif： 了解更多按钮

我想找到一种方法，让文本保持在原位，并在鼠标悬停在按钮上时消失在“+”元素后面，而不会换行。我在网上搜索过，尝试过使用自动换行和位置属性，还尝试过将按钮文本放入段落内，但我无法使其工作。我感觉这很简单，但我就是无法解决。或者，如果有一种更简单的方法来创建具有此功能的按钮，我也很想知道。这是我的代码：

HTML

 <body>
        
        <button class="button-container">
            <div class="button button-label">Learn More</div>
            <div class="button button-symbol">+</div>
        </button>
        
    </body>

CSS

.button-container {
                height: 4vw;
                width: 19vw;
                display: flex;
                align-items: center;
                padding: 0;
                border: none;
                cursor: pointer;
            }
            
            .button {
                height: 4vw;
                align-content: center;
                font-family: "Comfortaa", cursive;
                transition-duration: 0.6s;
                transition-property: width;
                transition-timing-function: ease-in-out;
            }
            
            .button-label {
                width: 15vw;
                background: #07BEB8;
                color: #FFF;
                font-size: 1.3vw;
                overflow: hidden;
            }
            
            .button-symbol {
                width: 4vw;
                background: #3DCCC7;
                color: #FFF;
                border-left: solid #FFF;
                font-size: 1.6vw;
                font-weight: bold;
            }
            
            .button-container:hover .button-label { 
                width: 0;
            }
            
            .button-container:hover .button-symbol { 
                width: 19vw;
            }
html css button css-transitions width
1个回答
0
投票

只需将 

white-space: nowrap
添加到标签即可。

.button-container {
  height: 4vw;
  width: 19vw;
  display: flex;
  align-items: center;
  padding: 0;
  border: none;
  cursor: pointer;
}

.button {
  height: 4vw;
  align-content: center;
  font-family: "Comfortaa", cursive;
  transition-duration: 0.6s;
  transition-property: width;
  transition-timing-function: ease-in-out;
}

.button-label {
  width: 15vw;
  background: #07beb8;
  color: #fff;
  font-size: 1.3vw;
  overflow: hidden;
  white-space: nowrap;
}

.button-symbol {
  width: 4vw;
  background: #3dccc7;
  color: #fff;
  border-left: solid #fff;
  font-size: 1.6vw;
  font-weight: bold;
}

.button-container:hover .button-label {
  width: 0;
}

.button-container:hover .button-symbol {
  width: 19vw;
}
<button class="button-container">
  <div class="button button-label">Learn More</div>
  <div class="button button-symbol">+</div>
</button>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.