如何制作一个漂亮的按钮

codePanda
1,180 阅读5分钟

前言

作为网页开发人员，我们都知道在网页上一个好看的按钮可以成为整个网页的关键点，使得用户能够更好地进行操作。那么，在本篇文章中，将会为您详细介绍构建这样一个漂亮的按钮所需的技术和步骤。

首先，让我们看看这个漂亮的按钮的代码。

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Beautiful Button</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: #1e1e1e;
        }

        a {
            position: relative;
            width: 200px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            text-decoration: none;
            text-transform: uppercase;
            font-size: 20px;
            font-weight: bold;
            color: #fff;
            background: linear-gradient(to right, #ff416c, #ff4b2b, #ff416c);
            background-size: 400%;
            border-radius: 50px;
            z-index: 1;
            border: none;
            outline: none;
            cursor: pointer;
            box-shadow: 0 5px 15px rgba(255, 65, 108, 0.4);
            transition: all 0.3s ease-in-out;
        }

        a::before {
            content: "";
            position: absolute;
            top: -5px;
            left: -5px;
            bottom: -5px;
            right: -5px;
            background: linear-gradient(to right, #ff416c, #be6a5d, #897479);
            background-size: 400%;
            border-radius: 50px;
            z-index: -1;
            filter: blur(20px);
            opacity: 0.7;
            transition: all 0.3s ease-in-out;
            animation: flow 2s linear infinite;
        }

        a:hover {
            background-position: right center;
            box-shadow: 0 5px 15px rgba(255, 65, 108, 0.6);
            transform: translateY(-5px);
        }

        a:hover::before {
            opacity: 1;
            filter: blur(30px);
        }

        @keyframes flow {
            0% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }

            100% {
                background-position: 0% 50%;
            }
        }

        @media (min-width: 768px) {
            a {
                width: 300px;
                height: 70px;
                line-height: 70px;
                font-size: 24px;
            }
        }

        @media (min-width: 992px) {
            a {
                width: 400px;
                height: 80px;
                line-height: 80px;
                font-size: 28px;
            }
        }

        @media (min-width: 1200px) {
            a {
                width: 500px;
                height: 100px;
                line-height: 100px;
                font-size: 32px;
            }
        }
    </style>
</head>

<body>
    <a href="#">Button</a>
</body>

</html>

理解了这段代码之后，我们就可以开始进行对应的代码分析了。

HTML代码介绍

首先，让我们看看HTML的部分。

<!DOCTYPE html>
<html lang="en">
<head>...<\head>
<body>
<a href="#">Button</a>
</body>
</html>

这里很简单，我们只需要在head标签中输入题目（title）等元数据，然后在body中放置按钮a标签即可。

CSS代码介绍

接下来是CSS部分。这里是一个最主要的按钮样式，同时代码也比较长，但是不用担心，我们会一步一步的解释下去。

* {
    margin: 0;
    padding: 0;
}

这段代码中，通用选择器*被用于reset CSS(重置样式)。其中margin和padding为0。

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #1e1e1e;
}

这里的作用是可以使整个body页面居于中央。在这里我们使用了flex布局，height:100vh是为了充满整个视口。同时给页面一个黑色背景。

a {
    position: relative;
    width: 200px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    background: linear-gradient(to right, #ff416c, #ff4b2b, #ff416c);
    background-size: 400%;
    border-radius: 50px;
    z-index: 1;
    border: none;
    outline: none;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(255, 65, 108, 0.4);
    transition: all 0.3s ease-in-out;
}

我们来研究一下这个最主要的按钮的CSS样式声明部分：

  • position:relative：position设置为相对，以便元素的定位。

  • width:200px，height:60px：按钮的宽度和高度已经定义好了。需要注意的是，这里可以使用@media以适应不同宽度的屏幕。

  • line-height:60px：将按钮内的文本垂直居中的方式，就是在按钮中使用与按钮高度相同的行高这个技巧。

  • text-align:center：按钮内的文本居中对齐。

  • text-decoration:none：删除链接的下划线。

  • text-transform:uppercase：将文本转换为大写字母。

  • font-size:20px，font-weight:bold：设置字体大小和字体加粗。

  • color:#fff：按钮文字的颜色为白色。

  • background:linear-gradient(to right,#ff416c,#ff4b2b,#ff416c)：此处使用了CSS3中的线性渐变。

  • background-size:400%：扩大背景的尺寸。

  • border-radius:50px：此属性设置在按钮上创建圆角。

  • z-index:1：位于其他元素之上。

  • border:none，outline:none：无边框，无轮廓。

  • cursor:pointer：光标在按钮上时显示为手等待。

  • box-shadow:0 5px 15px rgba(255,65,108,0.4)：该属性将给按钮赋予一个阴影。

  • transition:0.3s：缓慢的过渡动画。

a::before {
    content: "";
    position: absolute;
    top: -5px;
    left: -5px;
    bottom: -5px;
    right: -5px;
    background: linear-gradient(to right, #ff416c, #be6a5d, #897479);
    background-size: 400%;
    border-radius: 50px;
    z-index: -1;
    filter: blur(20px);
    opacity: 0.7;
    transition: all 0.3s ease-in-out;
    animation: flow 2s linear infinite;
}

这是一个重要的声明。从边缘处流出的渐变元素(称为before)模拟了发光的 button，同时增加了磨砂背景和动画效果。

  • background-size:400%：我们需要扩大背景尺寸以便之后做动画。

  • filter:blur(20px)：背景模糊20像素。

  • animation: flow 2s linear infinite：设置动画。flow是我们自定义动画名，2s表示动画时间，linear表示线性动画，infinite表示无限循环。

a:hover {
    background-position: right center;
    box-shadow: 0 5px 15px rgba(255, 65, 108, 0.6);
    transform: translateY(-5px);
}

我们需要为 hover 状态定义一些属性：

  • background-position:right center：在 hover 时，我们将背景位置从左侧移动到元素 right 的中心。

  • box-shadow:0 5px 15px rgba(255,65,108,0.6)：添加一个更密集的阴影。

  • transform:translateY(-5px)： translateY 将元素向上移动5像素。

a:hover::before {
    opacity: 1;
    filter: blur(30px);
}

最好的效果是在按钮周围添加发光的效果，因此我们不仅需要增加彩色背景的渐变，还要增加高斯模糊的文本效果。

  • opacity:1：变的不透明。

  • filter:blur(30px)：将背景模糊10像素。

做到这一步，我们的按钮样式就做好了。

代码的适应性

对于任何web网站，都希望做到响应式及在不同设备上有良好的展示效果，按钮也一样。目前我们已经有三种不同尺寸的按钮：

@media (min-width: 768px) {
    a {
        width: 300px;
        height: 70px;
        line-height: 70px;
        font-size: 24px;
    }
}

@media (min-width: 992px) {
    a {
        width: 400px;
        height: 80px;
        line-height: 80px;
        font-size: 28px;
    }
}

@media (min-width: 1200px) {
    a {
        width: 500px;
        height: 100px;
        line-height: 100px;
        font-size: 32px;
    }
}

在小屏幕上，按钮尺寸小于等于768px。因此，我们设置该尺寸的最小值，同时在@media查询中将按钮处理为以下样式：

  • width:300px、height:70px、line-height:70px、font-size:24px。

在中屏幕上，按钮尺寸高于768px，同时小于等于992px。因此，在@media中查询，得到了以下样式：

  • width:400px、height:80px、line-height:80px、font-size:28px。

如果您正在使用更大的屏幕，则可将设置更大的样式尺寸。此范例为1200px以上。

  • width:500px、height:100px、line-height:100px、font-size:32px。

总结

好的按钮有一个良好的视觉和你的使用者交互，如无缝性。本篇文章向您展示了如何通过CSS3中的渐变和动画的使用以及阴影的添加来创建漂亮的按钮。除此之外，响应式和适应性设计是按钮的一个重要设计部分。

avatar
文章
阅读
粉丝