Share multiple ways to make CSS buttons, with CSS button style code attached

In the project, almost all websites will use buttons, ranging from a dozen to a few. A practical and good-looking button can add a lot of color to the page, thereby attracting the user's attention. This article mainly talks about the various writing methods of CSS buttons and the beautification of CSS buttons. Finally, a common CSS button style code will be shown for reference. Okay, keep reading!

1. Various ways of writing CSS buttons

CSS buttons can be written directly with button, with a tag, or with input, of course. Using divs, you can use different styles to set the styles you want based on the characteristics of each tag. For example: if you write a button with the a tag, you will definitely use the attribute text-decoration: none. If you use button to write it beautifully, you may use the attribute border: none, etc.

1. Button button (no style)

<button>默认按钮</button>

2. Hyperlink a label button

<a href="#" class="button">链接按钮</a>

CSS part:

.button {
       background-color: #4CAF50;
       color: white;
       padding: 15px 32px;
       text-align: center;
       text-decoration: none;
       display: inline-block;
       font-size: 16px;
   }

3. Button button ( Including style)

<button class="button">按钮</button>

CSS part:

.button {
       background-color: #4CAF50;
       border: none;
       color: white;
       padding: 15px 32px;
       text-align: center;
       font-size: 16px;
       cursor: pointer;
   }

4. Input box button

<input type="button" class="button" value="输入框按钮">

CSS part:

.button {
       background-color: #4CAF50;
       border: none;
       color: white;
       padding: 15px 32px;
       text-align: center;
       font-size: 16px;
       cursor: pointer;
   }

Rendering:

2. Common CSS button style codes

Make a very textured metal button. When the user clicks this button, the image on the right will appear. The effect is that the background color becomes darker and the shadow around the button becomes an inner shadow.

.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;
 }

Picture display:

The above introduces what methods can be used to make buttons, and for the sake of beauty, you What styles can be set? Finally, an example is given for learners’ reference!

The above is the detailed content of Share multiple ways to make CSS buttons, with CSS button style code attached. For more information, please follow other related articles on the PHP Chinese website!