CSS 黑白相间按钮切换效果

8f1499e23f874948b23b58dcab3d1107.gif

    <template>
    	<view class="const">
    	<button class="btn-17">
    	  <span class="text-container">
    	    <span class="text">Button</span>
    	  </span>
    	</button>	
    	</view>
    </template>

    <script>

    </script>

    <style>
    	
    	body {
    		background-color: #212121;  /* 设置背景颜色 */
    	}
    	.const{
    		width: 270px;
    		margin-top: 280px;
    		margin-left: 30%;
    	}
    	.btn-17,
    	.btn-17 *,
    	.btn-17 :after,
    	.btn-17 :before,
    	.btn-17:after,
    	.btn-17:before {
    	  border: 0 solid;
    	  box-sizing: border-box;
    	}
    	
    	.btn-17 {
    	  -webkit-tap-highlight-color: transparent;
    	  -webkit-appearance: button;
    	  background-color: #000;
 

相关推荐

最近更新

  1. TCP协议是安全的吗?

    2024-02-04 14:08:01       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-02-04 14:08:01       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-02-04 14:08:01       19 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-02-04 14:08:01       20 阅读

热门阅读

  1. redis的数据淘汰测略

    2024-02-04 14:08:01       33 阅读
  2. C++的十宗罪:如何避免常见的错误和陷阱

    2024-02-04 14:08:01       33 阅读
  3. 调试OpenHarmony应用/服务

    2024-02-04 14:08:01       36 阅读
  4. 讲解机器学习中的 K-均值聚类算法及其优缺点

    2024-02-04 14:08:01       33 阅读
  5. SparingBoot高级-数据交换格式-请求响应

    2024-02-04 14:08:01       26 阅读
  6. apt轻松管理软件包的利器

    2024-02-04 14:08:01       33 阅读
  7. SparkException: A master URL必须在配置中设置

    2024-02-04 14:08:01       33 阅读
  8. 数据结构:用顺序表和单链表实现通讯录(上)

    2024-02-04 14:08:01       27 阅读
  9. Django商城项目实战

    2024-02-04 14:08:01       38 阅读
  10. 13:使用1个按键使静态数码管数值加1

    2024-02-04 14:08:01       36 阅读
  11. 使用Dijkstra算法解决最短路径问题

    2024-02-04 14:08:01       34 阅读
  12. vscode的vetur文档格式化失效

    2024-02-04 14:08:01       36 阅读
  13. Android Studio开发配置(gradle配置)

    2024-02-04 14:08:01       22 阅读