如何使用CSS制作按钮


本文摘自PHP中文网,作者不言,侵删。

今天的这篇文章中将给大家介绍四种按钮的实现方法,其中包括普通的方形按钮,圆角按钮,立体按钮和带有简单动画的按钮,下面我们来看具体的内容。

按钮

我们先来看一下普通方形按钮的实现方法

按钮代码如下所示

HTML代码

1

2

3

4

5

6

7

8

9

10

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title></title>

</head>

<body>

<button>普通方形按钮</button>

</body>

</html>

圆角按钮的实现方法

代码如下

HTML代码

1

<button class="kadomaru">圆角按钮</button>

CSS代码

1

2

3

4

5

6

7

8

9

10

.kadomaru {

  width:100px;

  font-size:12px;

  color:#FFFFFF;

  text-align:center;

  display:block;

  padding:10px 0 10px;

  background:#6BCBF6;

  border-radius: 20px;

}

立体按钮的实现方法

代码如下

HTML代码

1

<button class="shadow">立体按钮</button>

CSS代码

1

2

3

4

5

6

7

8

9

10

11

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

}

使用box-shadow指定阴影大小和阴影颜色,营造立体的感觉。

上述三种方法实现的按钮效果如下

按钮

最后一个是带有简单动画的按钮实现,我们来看具体的示例

代码如下

HTML代码

1

2

3

<div class="animation">

  <div class="effect"></div>

  <a href="#"> Touch me </a>

CSS代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

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

}

介绍定制的一个例子的话,将.effect的left属性变成right属性,并将.animation:hover .effect的left属性变更为right属性,可以变成向右的动画。

当执行上述代码时浏览器上显示如下效果:

2345截图20181206135425.png

将鼠标放在按钮上则会有一个向右的动画,显示效果如下

按钮

本篇文章到这里就已经全部结束了,有关CSS中按钮的制作方法大家可以移步到CSS视频教程或者CSS3视频教程栏目进一步学习!!!

以上就是如何使用CSS制作按钮的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

css3如何实现关闭按钮

html怎么设置按钮的大小

css实现一个简单的扁平化按钮

jquery如何让按钮不可用

css按钮如何去掉边框

layui怎么用open属性隐藏按钮

html5中submit是按钮

jquery如何设置按钮灰色不可用

bootstrap中怎么设置按钮位置

jquery使按钮不可用的方法是什么

更多相关阅读请进入《按钮》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...