网页按钮特效

最新推荐文章于 2023-02-23 09:57:55 发布

feixs1

最新推荐文章于 2023-02-23 09:57:55 发布

阅读量517

点赞数 2

分类专栏：前端网页文章标签： html css3

本文链接：https://blog.csdn.net/feixs1/article/details/106746233

版权

前端网页专栏收录该内容

5 篇文章 1 订阅

订阅专栏

今天，尝试做了一下按钮特效，接下来带大家看一下！

css制作网页按钮特效

具体代码如下：
HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="2.css">
    <title>Document</title>
</head>
<body>
    <ul>
        <li><a href="#" data-text="Home">Home</a></li>
        <li><a href="#" data-text="About">About</a></li>
        <li><a href="#" data-text="Login">Login</a></li>
        <li><a href="#" data-text="Registered">Registered</a></li>
        <li><a href="#" data-text="Team">Team</a></li>
        <li><a href="#" data-text="Join">Join</a></li>
      </ul>
</body>
</html>

CSS：

*{
    font-family: '微软雅黑', sans-serif;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  body{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: #000;
    overflow: hidden;
  }
  
  ul{
    position: relative;
    display: flex;
    flex-direction: column;
  }
  
  ul li{
    list-style: none;
    transition: 0.5s;
  }
  
  ul li a{
    position: relative;
    color: transparent; 
    text-decoration: none;
    font-weight: 900;
    text-transform: uppercase; 
    letter-spacing: 2px;
    font-size: 3em;
    padding: 0 10px;
    line-height: 1.2em;
  }
  
  ul li a::before{
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 0 10px;
    -webkit-text-stroke: 1px #eee;
    transform: translateY(0);
    transition: 0.5s;
    pointer-events: none;
  }
  
  ul li a:hover:before{
    transform: translateY(100%);
    opacity: 0;
  }
  
  ul li a::after{
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 0 10px;
    /* -webkit-text-stroke: 1px #eee; */
    transform: translateX(-100%);
    transition: 0.5s;
    pointer-events: none;
    opacity: 0;
    color: #03f4f2;
  }
  
  ul li a:hover:after{
    transform: translateX(0);
    opacity: 1;
  }

ok，分享到这里啦，我去复习啦！！！在这里插入图片描述

feixs1

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
网页按钮特效

今天，尝试做了一下按钮特效，接下来带大家看一下！具体代码如下：HTML：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="2.css"&g
复制链接

扫一扫