How to make a button using CSS

Today’s article will introduce you to four button implementation methods, including ordinary square buttons, rounded buttons, three-dimensional buttons and buttons with simple animations. Let’s take a look at the specific content.

Let’s take a look at the implementation method of ordinary square button

The button code is as follows

HTML code

  
  



普通方形How to make a button using CSS

Implementation method of rounded button

The code is as follows

HTML code

圆角How to make a button using CSS

CSS code

.kadomaru {
  width:100px;
  font-size:12px;
  color:#FFFFFF;
  text-align:center;
  display:block;
  padding:10px 0 10px;
  background:#6BCBF6;
  border-radius: 20px;
}

How to implement the three-dimensional button

The code is as follows

HTML code

立体How to make a button using CSS

CSS Code

.shadow {
  width:100px;
  font-size:12px;
  color:#FFFFFF;
  text-align:center;
  display:block;
  padding:10px 0 10px;
  background:#6BCBF6;
  border-radius:5px;
  box-shadow:1px 1px #1A6EA0;
}

Use box-shadow to specify the shadow size and shadow color to create a three-dimensional feeling.

The button effects achieved by the above three methods are as follows

The last one is a button implementation with simple animation. Let’s look at a specific example.

The code is as follows

HTML code

  

   Touch me 

CSS code

.animation {
  width:100px;
  height:50px;
  text-align:center;
  border:2px solid #BBBBBB;
  float:left;
  cursor:pointer;
  position:relative;
  box-sizing:border-box;
  overflow:hidden;
  margin:0 0 40px 0;
}
.animation a {
  font-family:arial;
  font-size:12px;
  color:#BBBBBB;
  text-decoration:none;
  line-height:50px;
  transition:all .10s ease;
  z-index:2;
  position:relative;
}
.effect {
  width:140px;
  height:50px;
  top:-2px;
  left:-140px;
  background:#BBBBBB;
  position:absolute;
  transition:all .5s ease;
  z-index:1;
}
.animation:hover .effect {
  left:0;
}
.animation:hover a {
  color:#FFFFFF;
}

To introduce an example of customization, change the left attribute of .effect to right attribute, and change the left attribute of .animation:hover .effect to the right attribute to turn it into a rightward animation.

When the above code is executed, the following effect is displayed on the browser:

Put the mouse on the button, and there will be a rightward animation, showing the effect. As follows

This article has ended here. For information on how to make buttons in CSS, you can go to CSS video tutorial orCSS3 video tutorial column for further study! ! !

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