Home >Web Front-end >CSS Tutorial >How to make a button using CSS

How to make a button using CSS

不言Original: 2018-12-06 14:12:104839browse

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

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

Implementation method of rounded button

The code is as follows

HTML code

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

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

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

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

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>

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:

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!

css css3 html animation

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：How to use CSS flexboxNext article：How to use CSS flexbox

See more

How to make a button using CSS

Related articles