search

Home  >  Article  >  Web Front-end  >  Teach you step by step how to use css to create a rounded button effect (detailed code explanation)

Teach you step by step how to use css to create a rounded button effect (detailed code explanation)

奋力向前
奋力向前Original
2021-08-18 17:30:344523browse

In the previous article "html article: How to achieve the input box effect in the web page (detailed code explanation)", I introduced how to use html to achieve the input box effect. The following article will introduce to you how to use CSS to create a rounded button effect. Let’s see how to do it together.

Teach you step by step how to use css to create a rounded button effect (detailed code explanation)

#htmlHow to make a rounded button in a web page

1. Create a new html file, first# First enter a a tag in ##body and insert an empty link. Button, and then insert the code that introduces the inline style in title< ;style type="text/css">.

Code example

<!DOCTYPE html>
<html>
<head>
<title>...</title>
<style type="text/css">
 
</style>
</head>
<body>
    <a href="#">按钮</a>
</body>
</html>

Code effect

Teach you step by step how to use css to create a rounded button effect (detailed code explanation)

2. Add a css style to the a tag, name it [

btn-style], and define the width, height, background color, font color, and remove the underline of the button. Add disply:block, otherwise the width and height of the defined button will not take effect. Then introduce the btn-style style in the a tag.

Code example

<style type="text/css">
           .btn-style{
                width: 150px;
                height: 50px;
                color: #f8ff00;
                background:#010dfb;
                text-decoration: none;
                display: block;
           }
</style>
</head>
<body>
    <a href="#">按钮</a>
</body>

Code effect

Teach you step by step how to use css to create a rounded button effect (detailed code explanation)

3. Continue to add styles, Define the font horizontal center, vertical center, font, and font size for the button.

Code example

line-height: 50px;
text-align: center;
font-size:"微软雅黑"；

Code effect

Teach you step by step how to use css to create a rounded button effect (detailed code explanation)

4. Set the corners to be rounded to look more like a button. 

border-radius: 100px;

Code effect

Teach you step by step how to use css to create a rounded button effect (detailed code explanation)

The effect is completed, okay.

Do you think border-radius is just rounded corners? In fact, it does not refer to the radius of the circle where the border is located. I will explain the border-radius attribute parameter in detail.

Attribute value units can be used: em, px, percentage, etc.

You can try it and change border-radius: 100px into 10px


border-radius: 10px

Code effect

Teach you step by step how to use css to create a rounded button effect (detailed code explanation)

The "Horizontal Radius" and "Vertical Radius" of each rounded corner of the element are set to 10px.

Teach you step by step how to use css to create a rounded button effect (detailed code explanation)

border-radius can set 1 to 4 values ​​at the same time. If four values ​​are set, they correspond to the upper left corner, upper right corner, lower right corner, and lower left corner. 

border-radius: 10px 20px 0px 30px;

Code effect

Teach you step by step how to use css to create a rounded button effect (detailed code explanation)

Recommended learning:

Html video tutorial

The above is the detailed content of Teach you step by step how to use css to create a rounded button effect (detailed code explanation). For more information, please follow other related articles on the PHP Chinese website!

css html href border
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：HTML article: How to implement the input box effect in web pages (detailed code explanation)Next article：HTML article: How to implement the input box effect in web pages (detailed code explanation)

Related articles

See more