按钮是任何网站最重要的用户界面组件。以创造性的独特方式设计按钮非常重要。当按钮用于显示一些优惠或令人兴奋的内容以增强用户体验时,就会使用按钮的文本显示效果。
方法:方法是用与按钮相同尺寸的条带覆盖按钮,然后在鼠标悬停时将其移动到任何方向。
HTML 代码:以下代码片段实现了按钮的创建。
Text Reveal Effect for Buttons
CSS 代码:
- 第 1 步:对按钮应用一些基本样式,例如添加填充和边框半径以具有圆角。
- 第 2 步:现在使用 before 选择器创建一个相同尺寸的条带以覆盖整个按钮。
- 第 3 步:现在使用悬停选择器将条带移动到任一方向,因为它在示例中向左移动。
注意:您可以根据需要将条带移动到任何方向。您也可以使用其他一些属性来根据您调整效果。
完整代码:是以上两段代码的组合。
Text Reveal Effect for Buttons
输出: