How to implement a simple button style using HTML-HTML Knowledge-php.cn

Home

Daily Programming

HTML Knowledge

How to implement a simple button style using HTML

藏色散人

Nov 10, 2018 pm 04:31 PM

This article mainly introduces how to use HTML to implement a simple button style.

In the process of web design, button setting can be said to be the most common and basic HTML/CSS knowledge and skill.

Recommended reference video tutorial: "HTML Tutorial"

The following is a code example to introduce to novice friends how to use HTML to implement a simple button style.

button button styleThe code example is as follows:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>button按钮样式</title>
    <style>
        .button1 {
            -webkit-transition-duration: 0.4s;
            transition-duration: 0.4s;
            padding: 16px 32px;
            text-align: center;
            background-color: white;
            color: black;
            border: 2px solid #4CAF50;
            border-radius:5px;
        }
        .button1:hover {
            background-color: #4CAF50;
            color: white;
        }
    </style>
</head>
<body>
<button class="button1">Green</button>
</body>
</html>

The effect is as follows:

How to implement a simple button style using HTML

Introduction to related attributes:

transition-duration The attribute specifies the time it takes to complete the transition effect. The -webkit-transition-duration attribute is for compatibility with the browser Safari. The

text-align attribute specifies the horizontal alignment of the text in the element. A value of center means that the text is centered horizontally.

border-radius property allows you to add a rounded border to an element.

:hover The selector is used to select the element on which the mouse pointer is floating. Simply put, it sets a new style when the mouse moves to the specified element.

Introduction to related tags:

The tag defines a button.

Here we use the

<div class="button1">Green</div>

Note, we need to give this when we use div Set the width of div, then the effect is as follows:

How to implement a simple button style using HTML

This article is about HTML making a simple button style, it is very simple, I hope it will be helpful to novices Friends can help!

The above is the detailed content of How to implement a simple button style using HTML. For more information, please follow other related articles on the PHP Chinese website!

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