How to make a button using CSS-CSS Tutorial-php.cn

How to make a button using CSS

不言

Release： 2018-12-06 14:12:10

Original

4713 people have browsed it

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.

How to make a button using CSS

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

The button code is as follows

HTML code

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
<button>普通方形How to make a button using CSS</button>
</body>
</html>

Copy after login

Implementation method of rounded button

The code is as follows

HTML code

<button class="kadomaru">圆角How to make a button using CSS</button>

Copy after login

CSS code

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

Copy after login

How to implement the three-dimensional button

The code is as follows

HTML code

<button class="shadow">立体How to make a button using CSS</button>

Copy after login

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

Copy after login

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

How to make a button using CSS

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

The code is as follows

HTML code

<div class="animation">
  <div class="effect"></div>
  <a href="#"> Touch me </a>

Copy after login

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

Copy after login

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:

How to make a button using CSS

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

How to make a button using CSS

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!