时间戳

首页 > 解决方案 > 如何使用 css 制作这种按钮

css - 如何使用 css 制作这种按钮

问题描述

我想做一个花哨的按钮（按钮示例图片附在下面），我实际上在网站上看到了这个按钮

我是CSS的初学者，我对它的了解很少，但我仍然想知道我们如何制作这样的按钮，以及它的悬停效果，请帮助我......

按钮的图像：- 在此处输入图像描述

标签： css

解决方案

查看他们作为@MMD 使用的代码，您可以看到有两个主要的东西在使用。

每个链接都有一个 before 伪元素，其左下边框绝对相对于 a 元素定位，并且边框颜色取自 CSS 变量 --bg。

要获得悬停效果，请注意在悬停时按钮向下和向左平移，而伪元素与按钮的偏移量减少到零。

<style>
  body {
    background: black;
    width: 100vw;
    height: 100vh;
  }
  
  .link {
    width: 20vmin;
    height: 10vmin;
    padding: 2vmin;
    background-color: var(--bg);
    position: relative;
    display: inline-block;
    margin: 2vmin;
    transform: translate(0, 0);
    transition: transform 0.3s linear;
  }
  
  .link::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 1vmin;
    left: -1vmin;
    border: solid var(--bg) 1px;
    display: inline-block;
  }
  
  .link:hover {
    transform: translate(-1vmin, 1vmin);
  }
  
  .link:hover::before {
    top: 0;
    left: 0;
  }
  
  .link1 {
    --bg: white;
  }
  
  .link2 {
    --bg: cyan;
  }
</style>

<body>
  <a class="link link1">Link1</a>
  <a class="link link2">Link2</a>
</body>

推荐阅读