信息悬停按钮 - 教程

信息悬停按钮 - 教程

HTML

对于 HTML，我们有一个按钮，里面有两个 span，“i”和“nfo”。 “Nfo”将在按钮悬停时显示。

 <button>  
 <span>一世</span>  
 <span class="nfo">NFO</span>  
 </button>

CSS

对于 CSS，首先我们将设置按钮样式。
我们将设置一些颜色，移除边框，宽度和高度为 30px，边框半径为 15px 将创建一个圆形。
使用 flexbox，我们将元素定位在中心并添加过渡，以便我们稍后将广告的悬停效果很好且平滑。

 按钮 {  
 边框：无；  
 光标：指针；  
 宽度：30px；  
 高度：30px；  
 边框半径：15px；  
 背景色：rgb(255, 128, 0);  
 颜色：#fff;  
 显示：弯曲；  
 证明内容：中心；  
 对齐项目：居中；  
 过渡：.3s；  
 }

对于“nfo”类，我们将宽度和不透明度设置为零并转换为 300 毫秒。

 .信息{  
 宽度：0px；  
 过渡：.3s；  
 不透明度：0；  
 }

在按钮悬停时，我们将选择“nfo”类并将宽度设置为 20px，不透明度设置为 1，当然还有过渡，这样宽度的变化就很平滑了。

 按钮：悬停 .nfo {  
 宽度：20px；  
 过渡：.3s；  
 不透明度：1；  
 }

最后，悬停按钮元素，我们将只增加宽度并设置过渡。

 按钮：悬停{  
 宽度：80px；  
 过渡：.3s；  
 }

就是这样。

谢谢阅读。 ❤️

您可以通过视频教程找到完整代码 这里 .

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/37584/29141816