欢迎您来到 | 赛里斯

编写凸起质感按钮

序这是一个非常快速的教程，我们将只使用 CSS制作一个外观漂亮的按钮。

<div class="container">
  <h1 class="title">Raised Button</h1>
  <h3 class="subtitle">How to create a button that gives the impression to be raised on hover.
    <div class="button-wrapper">
      <button class="ninja-button">Hover me</button>
    </div>
</div>

$muted-grey: #999;
$purple: #8300ff;
$white: #fff;

$base-shadow: rgba(0, 0, 0, 0.12);
$purple-shadow-from: rgba(131, 0, 255, 0.42);
$purple-shadow-to: rgba(131, 0, 255, 0.2);
$purple-box-shadow:  0 14px 26px -12px $purple-shadow-from, 0 4px 23px 0px $base-shadow, 0 8px 10px -5px $purple-shadow-to;

.container {
  max-width: 600px;
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  margin: 0 auto;
  text-align: center;
  transform: translateY(-50%);
  .title {
    font-family: 'Pacifico';
    font-size: 3rem;
    margin: 10px 0;
  }
  .subtitle {
    font-family: 'Lato';
    color: $muted-grey;
    font-weight: 400;
  }
  .button-wrapper {
    padding : 20px 0;
    .ninja-button {
      padding: 15px 50px;
      text-transform: uppercase;
      background: $purple;
      border: 2px solid $purple;
      color: $white;
      font-weight: 600;
      font-size: .75rem;
      border-radius: 50px;
      cursor: pointer;
      transition: all .4s;
      &:hover {
        opacity: 0.8;
        box-shadow: $purple-box-shadow;
      }
    }
  }
}

配置在开始之前，我们需要导入一些我们将使用的基本资产：2 种 Google 字体，即Pacifico和Lato，以使内容看起来更好。这就是我们所需要的。

太平洋：

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet">

拉图：

<link href="https://fonts.googleapis.com/css?family=Lato"
  rel="stylesheet">

HTML 标记让我们从创建我们的 html 结构开始。我们只需要一个容器来容纳我们的按钮：

<div class="container">
  <h1 class="title">Raised Button</h1>
  <h3 class="subtitle">How to create a button that gives the impression do be raised on hover.
    <div class="button-wrapper">
      <button class="ninja-button">Hover me</button>
    </div>
</div>

按钮包装元素只是为了给按钮一些间距。如您所见，我们使用了一个简单的 HTML元素，但您也可以使用一个元素。现在让我们深入研究 CSS，它是所有魔法发生的地方。

添加样式让我们开始添加样式。我们将首先快速处理演示和布局样式。

演示风格首先，我们需要添加演示样式：

.container {
    max-width: 600px;
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    margin: 0 auto;
    text-align: center;
    transform: translateY(-50%);
    .title {
        font-family: 'Pacifico';
        font-size: 3rem;
        margin: 10px 0;
    }
    .subtitle {
        font-family: 'Lato';
        color: $muted-grey;
        font-weight: 400;
    }
}

那里没什么特别的，只是一些基本知识来确定容器的大小和居中。但是，从上面的代码中仍然可以学到一个有用的技巧。查看容器样式，并注意它的位置。它被设置为absolute。然后我们使用top: 50%;垂直将容器推到屏幕中央。润色效果的最后一件事是添加一个transform: translateY(-50%);以准确居中元素。

声明变量我们的小项目需要一些变量。让我们宣布他们：

$muted-grey: #999;
$purple: #8300ff;
$white: #fff;

$base-shadow: rgba(0, 0, 0, 0.12);
$purple-shadow-from: rgba(131, 0, 255, 0.42);
$purple-shadow-to: rgba(131, 0, 255, 0.2);
$purple-box-shadow:  0 14px 26px -12px $purple-shadow-from, 0 4px 23px 0px $base-shadow, 0 8px 10px -5px $purple-shadow-to;

首先，我们声明我们需要的 3 种颜色。第二部分是事情变得有趣的地方。我们将使用 CSSbox-shadow属性来实现我们的凸起效果。如果你不知道这个 CSS 属性，你可以阅读这篇文章来了解更多。

我们在这里做什么？rgba我们首先声明一个基础阴影，它基本上只是一种以格式表示的黑色阴影。RGBA 将Alpha Channel（处理透明度）添加到 RGB 格式。然后我们声明我们紫色阴影的 2 个变体，一个比另一个不透明两倍。最后，我们声明我们的主框阴影变量 ( $purple-box-shadow)，它混合了我们之前创建的其他框阴影变量。现在，我们拥有了设计和完成按钮所需的一切。

按钮样式我们不需要太多的 CSS 来完成我们的按钮。让我们深入了解：

.container {
    .button-wrapper {
        padding : 20px 0;
        .ninja-button {
            padding: 15px 50px;
            text-transform: uppercase;
            background: $purple;
            border: 2px solid $purple;
            color: $white;
            font-weight: 600;
            font-size: .75rem;
            border-radius: 50px;
            cursor: pointer;
            transition: all .4s;
            &:hover {
                opacity: 0.8;
                box-shadow: $purple-box-shadow;
            }
        }
    }
}

我们不会谈论该.button-wrapper元素，因为它只是在这里为我们的按钮提供一些额外的间距。

我们也不会过多谈论按钮的美学和颜色，因为它非常个人化并且与您正在从事的项目类型相关。我们主要是想分解一下凸起的效果，看看鼠标悬停在按钮上会发生什么。重要的是以下 3 个 CSS 属性：

transition
opacity
box-shadow 该transition: all .3s;声明告诉浏览器效果将持续 0.3 秒，适用于所有过渡类型。然后我们使用hover选择器来调整按钮的不透明度和框阴影。就这么简单，当我们将鼠标悬停在按钮上时，我们之前定义的框阴影会添加一些不透明度，强调凸起的效果（给人一种它离光源更近的错觉）。

多田！我们不需要添加任何东西，我们的按钮现在可以正常工作了。

结语在这篇文章中，我们看到了如何使用过渡和框阴影创建一个简单的 CSS 凸起按钮。如果您想分享您的想法或提出问题，请在评论部分试一试。我希望你和我一样喜欢这个小课程，并希望很快在 Css 上再次见到你。

微软电脑管家V2.4-推荐安装系统清理软件

编写凸起质感按钮