CSS Transparent Button

We will discuss the CSS transparent button in this article. Let us first comprehend the CSS button.

CSS Button

The CSS button is a clickable button that is styled using CSS. The appearance of the button can be altered using CSS, such as background color, width, height, border, etc. The buttons can be styled according to the webpage and make the webpage look interesting.

The button can be constructed with the help of the following syntax:

The <button> is the opening tag, and the </button> is the closing tag in the above-given syntax.

Demonstration of a Button

Let us comprehend how to create a simple button on the web page.

Code:

<!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>

Output:

Here is the output in which we can witness a simple clickable button.

Demonstration of the CSS Button

Let's understand how to create a button using CSS. To give the button a style, we will set its width, height, color, background color, border, border radius, and box-shadow.

Code:

<!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>

Output:

Here is the output in which we can witness a styled button that looks more attractive.

Transparent Button

A button without a visible border or background is called a transparent button. We can construct a transparent button utilizing the background-color property and giving it a "transparent" keyword or "rgba" value.

"transparent" keyword

We can use the "transparent" keyword to create a transparent button.

Syntax:

"RGBA" value

We can use the "RGBA" value to create a transparent button.

Syntax:

The value "rgba" is used in place of the color name in the above-provided syntax. The rgba consists of four values, which are explained below:

Value 1: It is utilized to give the red color from 0 to 255 or 0% to 100%.
Value 2: It is utilized to give the green color from 0 to 255 or 0% to 100%.
Value 3: It is utilized to give the blue color from 0 to 255 or 0% to 100%.
Value 4: It is an alpha parameter that is utilized to give transparency from 0 to 1.0. All values must be 0 for full transparency.

Demonstration of the CSS Transparent Button

Let us understand how to create a transparent button utilizing CSS.

Demonstration 1:

We will construct a transparent button utilizing the background-color property and giving it the value of "transparent".

Code:

<!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>

Output:

Here is the output in which we can witness a transparent button whose background is visible.

Demonstration 2:

We will construct a transparent button utilizing the background-color property and giving it the "rgba" value.

Code:

<!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>

Output:

Here is the output in which we can witness a transparent button created utilizing the rgba value.

Demonstration 3:

We will construct a transparent submit button in the form utilizing the background-color property.

Code:

<!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>

Output:

Here is the output in which we can witness a transparent submit button inside the form.

Demonstration 4:

We will construct transparent buttons inside the navigation bar utilizing the background-color property.

Code:

<!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>

Output:

Here is the output in which we can witness transparent buttons inside the navigation bar.

Demonstration 5:

We will construct a call-to-action transparent button utilizing the background-color property.

Code:

<!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>

Output:

Here is the output in which we can witness a call to action transparent button.

Browsers Support

Following are the browsers that support the CSS button and CSS background-color properties:

Microsoft Edge
Google Chrome
Safari
Firefox
Opera

Conclusion

In this article, we have understood the CSS transparent button and how to create one by giving the "transparent" or "rgba" value to the CSS background-color property.

Next TopicSkeleton CSS

← prev next →