How to set the style of html button tag? Introduction to the style of html button tag-HTML Tutorial-php.cn

How to set the style of html button tag? Introduction to the style of html button tag

寻∝梦

Release： 2018-09-03 17:12:39

Original

22206 people have browsed it

This article mainly introduces the style setting of HTML button tags, as well as the beautification style of HTML button tags. Next, let us read this article together

First, let’s introduce the style settings of the button tag in HTML:

Ordinary button settings:

Set the type attribute of the input element to "button". Normal buttons can be created. The text displayed on the button is the value of the value attribute. If no value attribute is provided, an empty button is simply created. For example:

<input type="button" value="立即购买">

Copy after login

How to set the style of html button tag? Introduction to the style of html button tag

The effect is obvious, this is the default normal button setting.

By default, there is no response when clicking on a normal button. Therefore, you need to register events for ordinary buttons and manually write the corresponding handler functions. If you want to submit the form when the above button is clicked, you need to register the onClick event for the button. For example:

<form name="buy" action="form.html" method="post">
    <button onClick="submitForm(buy)">立即购买</button>
</form>

Copy after login

Now click the button, the onClick event will be triggered, and the event processing function submitForm(buy) will be called. The parameter buy is the value of the name attribute of the form to be processed. If you want to submit the form after clicking the button, you can call the submit() method of the form object in the event handling function:

function submitForm(f) {
    f.submit();  
}

Copy after login

This is a default setting , now let's take a look at setting the style for the html button tag:

Let me show you a complete code example:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
<style>
.div {
    display: inline-block;
    padding: .3em .5em;
    background-image: linear-gradient(#ddd, #bbb);
    border: 1px solid rgba(0,0,0,.2);
    border-radius: .3em;
    box-shadow: 0 1px white inset;
    text-align: center;
    text-shadow: 0 1px 1px black;
    color:white;
    font-weight: bold;
}
.div:active{
    box-shadow: .05em .1em .2em rgba(0,0,0,.6) inset;
    border-color: rgba(0,0,0,.3);
    background: #bbb;
}
</style>
</head>
<body>
<div class="div">Button</div>
</body>
</html>

Copy after login

The effect of this As shown in the picture:

How to set the style of html button tag? Introduction to the style of html button tag

The effect of this is very obvious. It looks much better than the default. When we learn js, we can also use js technology to The default button settings are more beautiful.

Okay, the above is about the style settings of the html button tag, as well as a summary of the beautification style (if you want to learn more, come to the PHP Chinese website). If you have any questions, you can ask below.

【Editor’s Recommendation】

How to make a html drop-down menu? Code example introduction to html drop-down menu

#How to make the html radio button selected by default? Example of usage of radio button of input tag

The above is the detailed content of How to set the style of html button tag? Introduction to the style of html button tag. For more information, please follow other related articles on the PHP Chinese website!