css实现一个按钮

最新推荐文章于 2024-05-01 15:35:52 发布

Whbbit

最新推荐文章于 2024-05-01 15:35:52 发布

阅读量156

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/rabbit_moon/article/details/112205270

版权

效果展示：
## HTML部分

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>按钮</title>
  <link rel="stylesheet" href="./style/main.css">
</head>

<body>
  <a href="javascript:;">
    <span>Button</span>
    <span>Button</span>
  </a>
</body>

</html>

CSS部分

*{
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
}

body{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #2c3e50;
}

a{
  position: relative;
  display: inline-block;
  width: 160px;
  height: 50px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, .15);
}

a span{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #34495e;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 2px;
  font-size: 25px;
  text-transform: uppercase;
  color: #ffffff;
}


a span:nth-child(2){
  color: #34495e;
  background: #fff;
  overflow: hidden;
  z-index: 2;
  transition: all .5s;
  clip-path: polygon(76% 0, 100% 0%, 100% 100%, 71% 100%, 48% 50%);
}

a span:nth-child(1):hover ~ span:nth-child(2){
  clip-path: polygon(100% 0, 100% 0%, 100% 100%, 100% 100%, 100% 50%);
}
a span:nth-child(2):hover{
  clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%, 0 50%);
}

Whbbit

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css实现一个按钮

效果展示：## HTML部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>按钮</title> <link rel="stylesheet" href="./sty
复制链接

扫一扫