CSS Transparent Button

2025年1月22日 | 阅读时长 5 分钟

在本文中，我们将讨论 CSS 透明按钮。让我们先来理解 CSS 按钮。

CSS 按钮

CSS 按钮是一个可点击的按钮，它使用 CSS 进行样式设置。按钮的外观可以通过 CSS 进行更改，例如背景颜色、宽度、高度、边框等。按钮可以根据网页进行样式设置，并使网页看起来更有趣。

可以使用以下语法构建按钮：

在上述语法中，<button> 是开始标签，</button> 是结束标签。

按钮演示

让我们来理解如何在网页上创建简单按钮。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Button</title>
</head>
<body>
    <h3>Simple Button</h3>
    <button>Click Me</button>
</body>
</html>

输出

这是输出，我们可以从中看到一个简单的可点击按钮。

CSS 按钮演示

让我们了解如何使用 CSS 创建按钮。为了给按钮设置样式，我们将设置其宽度、高度、颜色、背景颜色、边框、圆角和阴影。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Button</title>
    <style>
        button {
            width: 100px;
            height: 45px;
            color: purple;
            background-color: bisque;
            border: 2px solid purple;
            border-radius: 10px;
            box-shadow: 5px 5px;
        }
    </style>
</head>
<body>
    <h3>CSS Button</h3>
    <button>Click Me</button>
</body>
</html>

输出

这是输出，我们可以从中看到一个看起来更具吸引力的样式按钮。

透明按钮

没有可见边框或背景的按钮称为透明按钮。我们可以使用 background-color 属性并为其提供“transparent”关键字或“rgba”值来创建透明按钮。

“transparent”关键字

我们可以使用“transparent”关键字来创建透明按钮。

语法

“RGBA”值

我们可以使用“RGBA”值来创建透明按钮。

语法

在上述语法中，“rgba”值用于代替颜色名称。rgba 包含四个值，解释如下：

值 1：用于设置红色，范围从 0 到 255 或 0% 到 100%。
值 2：用于设置绿色，范围从 0 到 255 或 0% 到 100%。
值 3：用于设置蓝色，范围从 0 到 255 或 0% 到 100%。
值 4：这是一个 alpha 参数，用于设置透明度，范围从 0 到 1.0。值为 0 时完全透明。

CSS 透明按钮演示

让我们来理解如何使用 CSS 创建透明按钮。

演示 1

我们将使用background-color 属性并为其设置“transparent”值来创建透明按钮。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Transparent Button</title>
    <style>
        button {
            width: 100px;
            height: 45px;
            color: greenyellow;
            background-color: transparent;
            border: 2px solid greenyellow;
            box-shadow: 2px 2px rgb(210, 244, 214);
            border-radius: 10px;
        }
    </style>
</head>
<body>
    <h3>CSS Transparent Button</h3>
    <button>Click Me</button>
</body>
</html>

输出

这是输出，我们可以从中看到一个背景可见的透明按钮。

演示 2

我们将使用background-color 属性并为其设置“rgba”值来创建透明按钮。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS transparent button utilizing rgba value</title>
    <style>
        body {
            background-color: rgb(253, 253, 148);
        }
        button {
            width: 100px;
            height: 45px;
            color: orangered;
            background-color: rgba(0, 0, 0, 0);
            border: 2px solid orangered;
            box-shadow: 2px 2px rgb(252, 174, 126);
            border-radius: 15px;
        }
    </style>
</head>
<body>
    <h3>CSS transparent button utilizing rgba value</h3>
    <button>Click Me</button>
</body>
</html>

输出

这是使用 rgba 值创建的透明按钮的输出。

演示 3

我们将使用 background-color 属性在表单中创建一个透明的提交按钮。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS transparent button inside the form</title>
    <style>
        body {
            background-color: plum;
        }
        form {
            border: 2px solid purple;
            width: 450px;
            height: 360px;
            margin: 10px;
            padding: 15px;
        }
        input {
            width: 300px;
            height: 20px;
            border: 1px solid purple;
        }
        button {
            width: 75px;
            height: 36px;
            color: purple;
            background-color: rgba(0, 0, 0, 0);
            border: 2px solid purple;
            box-shadow: 2px 2px 2px rgb(162, 26, 216);
            border-radius: 15px;
        }
    </style>
</head>
<body>
    <h3>Student Registration Form</h3>
    <form>
        <label for="Full Name">Full Name:</label> <br> <br>
        <input type="text" name="full-name" value="Full Name"> <br> <br>
        <label for="address">Address:</label> <br> <br>
        <input type="text" name="address" value="Type your address"> <br> <br>
        <label for="dob">Date of Birth:</label> <br> <br>
        <input type="date" name="dob" value="Date of Birth"> <br> <br>
        <label for="course">Course Name:</label> <br> <br>
        <input type="text" name="Course" value="Course"> <br> <br>
        <button>Submit</button>
    </form>
</body>
</html>

输出

这是输出，我们可以从中看到表单内的透明提交按钮。

演示 4

我们将使用 background-color 属性在导航栏中创建透明按钮。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS transparent button in the navigation bar</title>
    <style>
        body {
            background-color: bisque;
        }
        nav {
            width: 100%;
            height: 225px;
            background-color: rgb(194, 116, 13);
            padding: 10px;
        }
        button {
            width: 500px;
            height: 42px;
            font-size: 18px;
            color: bisque;
            background-color: rgba(0, 0, 0, 0);
            border: 2px solid bisque;
            box-shadow: 2px 2px bisque;
            border-radius: 6px;
        }
    </style>
</head>
<body>
    <nav>
        <button>Home</button> <br> <br>
        <button>About</button> <br> <br>
        <button>Services</button> <br> <br>
        <button>Contact Us</button> <br> <br>
    </nav>
</body>
</html>

输出

这是输出，我们可以从中看到导航栏内的透明按钮。

演示 5

我们将使用 background-color 属性创建一个行动号召（call-to-action）透明按钮。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Call-to-action CSS transparent button</title>
    <style>
        body {
            background-color: rgb(253, 253, 148);
        }
        button {
            width: 120px;
            height: 50px;
            font-size: 18px;
            color: red;
            background-color: transparent;
            border: 2px solid red;
            box-shadow: 4px 4px 2px 2px red;
            border-radius: 20px;
        }
    </style>
</head>
<body>
    <h3>Call-to-action CSS transparent button</h3>
    <button>Buy Now!!</button>
</body>
</html>

输出

这是输出，我们可以从中看到一个行动号召透明按钮。

浏览器支持

以下是支持CSS 按钮和CSS background-color属性的浏览器：

Microsoft Edge
谷歌浏览器
Safari
火狐
Opera

结论

在本文中，我们了解了CSS 透明按钮以及如何通过将“transparent”或“rgba”值赋给CSS background-color属性来创建它。

下一主题CSS 删除线

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题