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:
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:
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!
What are the e-commerce platforms?
What is disk quota
Top ten digital currency exchanges
Introduction to dex concept digital currency
How to view stored procedures in MySQL
What drawing software are there?
The difference between static web pages and dynamic web pages
Introduction to laravel components
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
