Home >Web Front-end >HTML Tutorial >Which tags can be used to create html buttons (detailed explanation with pictures and text)

Which tags can be used to create html buttons (detailed explanation with pictures and text)

yuliaOriginal: 2018-10-26 15:14:5910503browse

People who often write pages or frequently browse websites must be familiar with buttons. Friends who are learning HTML and CSS, can you write HTML button code? What tags can be used to create buttons? This article will introduce three tags (methods) for making HTML button styles based on examples. It has certain reference value and interested friends can take a look.

Making buttons requires a certain foundation of HTML and CSS. If you are unclear, you can refer to the relevant articles on the PHP Chinese website, or visit HTML video tutorial, CSS video tutorial , I hope this can help you.

Method 1: button tag

Instance description: Use the

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   .button{border: none;background: green;padding: 15px 30px;font-size: 20px;color: white;cursor: pointer;}
  </style>
 </head>
 <body>
  <button class="button">button</button>
 </body>
</html>

The effect is as shown in the picture:

Which tags can be used to create html buttons (detailed explanation with pictures and text)

Method 2:Tag

Instance description: Use the a tag to make a button, set the button background color to red, set the font size to 25px, use text-decoration: none to remove the underline of the a tag, and use border-radius: 10px, Let the button have a rounded corner effect. The specific code is as follows:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   body{margin: 50px 100px;}
   .a{text-decoration: none;padding: 20px 35px;background: red;font-size: 25px;border-radius: 10px;color: white;}
  </style>
 </head>
 <body>
  <a href="#" class="a">按钮a</a>
 </body>
</html>

Effect picture:

Which tags can be used to create html buttons (detailed explanation with pictures and text)

##Method 3: input tag

element is used in the

form. You can set the type of input data through the type attribute. When type is set to submit, it represents a submit button. When type is set to reset, it represents a reset button. .

Instance description: Use CSS to beautify the submit button, set the background color to pink, the font color to black, the font size to 30px, and use border-radius: 20px to set the rounded corners. No settings are made for the reset reset button. The specific code is as follows:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   .submit{border: none;padding: 30px 45px;background: pink;border-radius: 20px;font-size: 30px;}
  </style>
 </head>
 <body>
  <form action="" method="post">   
   <input type="submit" value="submit" class="submit"/><br>   
   <input type="reset" value="reset" class="reset"/>
  </form>
 </body>
</html>

Rendering:

Which tags can be used to create html buttons (detailed explanation with pictures and text)

Summary: Make html button There are three methods, one is button tag, one is a tag, and one is input tag (input tag is divided into two types, submit button and reset button). The specific tag to choose depends on personal habits and work. Needed.

The above introduces to you which tags can be used to make buttons. Beginners must try it by themselves to see if they can make more beautiful buttons. I hope this article will be helpful to you! For more related tutorials, please visit

HTML5 full version manual

The above is the detailed content of Which tags can be used to create html buttons (detailed explanation with pictures and text). 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

Previous article：What does the caption tag mean and how to use it (with code)Next article：What does the caption tag mean and how to use it (with code)

See more

Which tags can be used to create html buttons (detailed explanation with pictures and text)

Related articles