有趣的CSS - 圆点交互按钮

大家好，我是 Just，这里是「设计师工作日常」，今天分享的是一个有意思的圆点交互文字按钮效果。

《有趣的css》系列最新实例通过公众号「设计师工作日常」发布。

目录

• 整体效果
• 核心代码
• • html 代码
  • css 部分代码
  • 完整代码如下
  • • html 页面
    • css 样式
    • 页面渲染效果

      整体效果

      

      :hover 获取鼠标状态，当鼠标悬浮上方时，改变背景样式来实现鼠标的交互

      此效果适用于文字按钮，也可以用于标记文字链接的地方，可以让鼠标与文字有一个有意思的交互效果。

      ---

      核心代码部分，简要说明了写法思路；完整代码在最后，可直接复制到本地运行。

      核心代码

      html 代码

      
        
        查看详情
      
      

      两个 span 搭建按钮主体。

      css 部分代码

      .btn29{
        width: 100px;
        height: 42px;
        line-height: 42px;
        position: relative;
        cursor: pointer;
      }
      .btn29-bg{
        width: 30px;
        height: 30px;
        display: block;
        border-radius: 15px;
        position: absolute;
        left: 0;
        bottom: 0;
        background-color: #97E138;
        transition: 0.24s;
      }
      .btn29-span-text{
        width: 100%;
        text-align: center;
        display: block;
        font-size: 16px;
        font-weight: 700;
        color: #056C00;
        position: absolute;
      }
      .btn29:hover .btn29-bg{
        width: 100%;
        height: 42px;
        border-radius: 21px;
      }
      

      当鼠标悬浮时，改变圆形 span 的参数，并且加上 transition 过渡效果，来实现圆形变成矩形背景的交互的效果。

      完整代码如下

      html 页面

      
        
          
          
          圆点交互按钮
        
        
          
      
            
      
              
              查看详情
            
          
        
      
      

      css 样式

      /** style.css **/
      .app{
        width: 100%;
        height: 100vh;
        background-color: #ffffff;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .btn29{
        width: 100px;
        height: 42px;
        line-height: 42px;
        position: relative;
        cursor: pointer;
      }
      .btn29-bg{
        width: 30px;
        height: 30px;
        display: block;
        border-radius: 15px;
        position: absolute;
        left: 0;
        bottom: 0;
        background-color: #97E138;
        transition: 0.24s;
      }
      .btn29-span-text{
        width: 100%;
        text-align: center;
        display: block;
        font-size: 16px;
        font-weight: 700;
        color: #056C00;
        position: absolute;
      }
      .btn29:hover .btn29-bg{
        width: 100%;
        height: 42px;
        border-radius: 21px;
      }
      

      页面渲染效果

      

      以上就是所有代码，以及简单的思路，希望对你有一些帮助或者启发。

      ---

      [1] 原文阅读

      ---

      CSS 是一种很酷很有趣的计算机语言，在这里跟大家分享一些 CSS 实例 Demo，为学习者获取灵感和思路提供一点帮助，希望你们喜欢。

      我是 Just，这里是「设计师工作日常」，求点赞求关注！