css边框效果

╰半橙微兮° 2022-12-03 09:44 143阅读 0赞

**Html代码：**

<div id="draw-border">
      <button>Hover me</button>
    </div>

**css样式：**

#draw-border { 
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }
    
    button { 
      border: 0;
      background: none;
      text-transform: uppercase;
      color: #4361ee;
      font-weight: bold;
      position: relative;
      outline: none;
      padding: 10px 20px;
      box-sizing: border-box;
    }
    
    button::before, button::after { 
      box-sizing: inherit;
      position: absolute;
      content: '';
      border: 2px solid transparent;
      width: 0;
      height: 0;
    }
    
    button::after { 
      bottom: 0;
      right: 0;
    }
    
    button::before { 
      top: 0;
      left: 0;
    }
    
    button:hover::before, button:hover::after { 
      width: 100%;
      height: 100%;
    }
    
    button:hover::before { 
      border-top-color: #4361ee;
      border-right-color: #4361ee;
      transition: width 0.3s ease-out, height 0.3s ease-out 0.3s;
    }
    
    button:hover::after { 
      border-bottom-color: #4361ee;
      border-left-color: #4361ee;
      transition: border-color 0s ease-out 0.6s, width 0.3s ease-out 0.6s, height 0.3s ease-out 1s;
    }

**效果图：**  
![在这里插入图片描述][format_png_pic_center]  
**其它更多css效果可参考下面链接**

[点我查看更多css hover效果][css hover]

[format_png_pic_center]: /images/20221123/81a15a93804b4c05be7d3a5867ef7616.png
[css hover]: https://juejin.im/post/6861501624993447950

发表评论取消回复

表情：

评论列表（有 0 条评论，143人围观）

还没有评论，来说两句吧...

相关阅读

相关按钮—边框效果

按钮—边框效果 ![在这里插入图片描述][2021041819343385.gif_pic_center] <!DOCTYPE html> <html

喜欢ヅ旅行/ 2023年01月13日 10:54/ 0 赞/ 125 阅读

相关边框效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

￡神魔★判官ぃ/ 2022年12月03日 12:56/ 0 赞/ 110 阅读

相关 css边框效果

Html代码： <div id="draw-border"> <button>Hover me</button> </div> css样式：

╰半橙微兮°/ 2022年12月03日 09:44/ 0 赞/ 144 阅读

相关 CSS 边框阴影效果

\shadow1\{ width: 200px; height: 100px; color: white; background-color: red

川长思鸟来/ 2022年09月27日 13:28/ 0 赞/ 268 阅读

相关内边框外边框 css,CSS之外边框与内边框hover伪类效果

嗯，这是一个高大上的标题。对于一个前端人员特别是我这种侧重物业重构的来说，hover肯定不会陌生，通俗一点而言就是鼠标放上去之后有那么一丁点小效果(修改CSS样式)，至于是

小鱼儿/ 2022年09月02日 14:56/ 0 赞/ 226 阅读

相关 CSS-边框效果

2.1、border-image <title>Border-image</title> <style type="text/css">

矫情吗；*/ 2022年07月15日 11:09/ 0 赞/ 234 阅读

相关 CSS-边框效果

2.1、border-image <title>Border-image</title> <style type="text/css">

客官°小女子只卖身不卖艺/ 2022年07月15日 11:09/ 0 赞/ 216 阅读

相关【CSS】边框

CSS 边框属性 CSS边框属性允许你指定一个元素边框的样式和颜色。 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_

淩亂°似流年/ 2022年04月01日 02:51/ 0 赞/ 285 阅读

相关 css边框

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl

妖狐艹你老母/ 2021年12月11日 02:23/ 0 赞/ 359 阅读

相关 css如何利用实现虚线边框滚动效果

css如何利用实现虚线边框滚动效果

小灰灰/ 2020年04月26日 07:02/ 0 赞/ 942 阅读