css3学习笔记之按钮

基本按钮样式


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

<!DOCTYPE html>

<html>

<head>

<style>

.button {

    background-color: #4CAF50;

    border: black;/**/

    color: white;/*字体颜色*/

    padding: 15px 32px;

    text-align: center;

    text-decoration: none;

    display: inline-block;

    font-size: 16px;

    margin: 4px 2px;

    cursor: pointer;

}

</style>

</head>

<body>

<h2>CSS 按钮</h2>

<button>默认按钮</button>

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

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

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

</body>

</html>

按钮颜色


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

<!DOCTYPE html>

<html>

<head>

<style>

.button {

    background-color: #4CAF50; /* Green */

    border: none;

    color: white;

    padding: 15px 32px;

    text-align: center;

    text-decoration: none;

    display: inline-block;

    font-size: 16px;

    margin: 4px 2px;

    cursor: pointer;

}

.button2 {background-color: #008CBA;} /* Blue */

.button3 {background-color: #f44336;} /* Red */ 

.button4 {background-color: #e7e7e7; color: black;} /* Gray */ 

.button5 {background-color: #555555;} /* Black */

</style>

</head>

<body>

<h2>按钮颜色</h2>

<p>我们可以使用 background-color 属性来设置按钮颜色:</p>

<button class="button">Green</button>

<button class="button button2">Blue</button>

<button class="button button3">Red</button>

<button class="button button4">Gray</button>

<button class="button button5">Black</button>

</body>

</html>

按钮大小

我们可以使用 font-size 属性来设置按钮大小:

CSS 实例

.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}

圆角按钮

我们可以使用 border-radius 属性来设置圆角按钮:

CSS 实例

.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}

按钮边框颜色

我们可以使用 border 属性设置按钮边框颜色:

CSS 实例

.button1 {
    background-color: white;
    color: black;
    border: 2px solid #4CAF50; /* Green */
}
...

鼠标悬停按钮

我们可以使用 :hover 选择器来修改鼠标悬停在按钮上的样式。

提示: 我们可以使用 transition-duration 属性来设置 "hover" 效果的速度:


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

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

<!DOCTYPE html>

<html>

<head>

<style>

.button {

    background-color: #4CAF50; /* Green */

    border: none;

    color: white;

    padding: 16px 32px;

    text-align: center;

    text-decoration: none;

    display: inline-block;

    font-size: 16px;

    margin: 4px 2px;

    -webkit-transition-duration: 0.4s; /* Safari */

    transition-duration: 0.4s;

    cursor: pointer;

}

.button1 {

    background-color: white; 

    color: black; 

    border: 2px solid #4CAF50;

}

.button1:hover {

    background-color: #4CAF50;

    color: white;

}

.button2 {

    background-color: white; 

    color: black; 

    border: 2px solid #008CBA;

}

.button2:hover {

    background-color: #008CBA;

    color: white;

}

.button3 {

    background-color: white; 

    color: black; 

    border: 2px solid #f44336;

}

.button3:hover {

    background-color: #f44336;

    color: white;

}

.button4 {

    background-color: white;

    color: black;

    border: 2px solid #e7e7e7;

}

.button4:hover {background-color: #e7e7e7;}

.button5 {

    background-color: white;

    color: black;

    border: 2px solid #555555;

}

.button5:hover {

    background-color: #555555;

    color: white;

}

</style>

</head>

<body>

<h2>鼠标悬停按钮</h2>

<p>我们可以使用 :hover 选择器来修改鼠标悬停在按钮上的样式。</p>

<p><strong>提示:</strong> 我们可以使用 <code>transition-duration</code> 属性来设置 "hover" 效果的速度:</p>

<button class="button button1">Green</button>

<button class="button button2">Blue</button>

<button class="button button3">Red</button>

<button class="button button4">Gray</button>

<button class="button button5">Black</button>

</body>

</html>

按钮阴影


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

<!DOCTYPE html>

<html>

<head>

<style>

.button {

    background-color: #4CAF50; /* Green */

    border: none;

    color: white;

    padding: 15px 32px;

    text-align: center;

    text-decoration: none;

    display: inline-block;

    font-size: 16px;

    margin: 4px 2px;

    cursor: pointer;

    -webkit-transition-duration: 0.4s; /* Safari */

    transition-duration: 0.4s;

}

.button1 {

    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);

}

.button2:hover {

    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);

}

</style>

</head>

<body>

<h2>按钮阴影</h2>

<p>我们可以使用 box-shadow 属性来为按钮添加阴影:</p>

<button class="button button1">阴影按钮</button>

<button class="button button2">鼠标悬停后出现阴影</button>

</body>

</html>

禁用按钮

我们可以使用 opacity 属性为按钮添加透明度 (看起来类似 "disabled" 属性效果)。

提示: 我么可以添加 cursor 属性并设置为 "not-allowed" 来设置一个禁用的图片:

CSS 实例

.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

按钮宽度

默认情况下，按钮的大小有按钮上的文本内容决定( 根据文本内容匹配长度 )。 我们可以使用 width 属性来设置按钮的宽度:

提示: 如果要设置固定宽度可以使用像素 (px) 为单位，如果要设置响应式的按钮可以设置为百分比。

CSS 实例

.button1 {width: 250px;}
.button2 {width: 50%;}
.button3 {width: 100%;}

按钮组

移除外边距并添加 float:left 来设置按钮组:


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

<!DOCTYPE html>

<html>

<head>

<style>

.button {

    background-color: #4CAF50; /* Green */

    border: none;

    color: white;

    padding: 15px 32px;

    text-align: center;

    text-decoration: none;

    display: inline-block;

    font-size: 16px;

    cursor: pointer;

    float: left;

}

.button:hover {

    background-color: #3e8e41;

}

</style>

</head>

<body>

<h2>按钮组</h2>

<p>移除外边距并添加 float:left 来设置按钮组:</p>

<button class="button">Button</button>

<button class="button">Button</button>

<button class="button">Button</button>

<button class="button">Button</button>

<p style="clear:both"><br>记住要清除浮动，否则下一个 p 元素的按钮也会显示在同一行。</p>

</body>

</html>

带边框按钮组


我们可以使用 border 属性来设置带边框的按钮组:

CSS 实例

.button {
    float: left;
    border: 1px solid green
}

按钮动画

鼠标移动到按钮上后添加箭头标记:


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

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

<!DOCTYPE html>

<html>

<head>

<style>

.button {

  display: inline-block;

  border-radius: 4px;

  background-color: #f4511e;

  border: none;

  color: #FFFFFF;

  text-align: center;

  font-size: 28px;

  padding: 20px;

  width: 200px;

  transition: all 0.5s;

  cursor: pointer;

  margin: 5px;

}

.button span {

  cursor: pointer;

  display: inline-block;

  position: relative;

  transition: 0.5s;

}

.button span:after {

  content: ‘»‘;

  position: absolute;

  opacity: 0;

  top: 0;

  right: -20px;

  transition: 0.5s;

}

.button:hover span {

  padding-right: 25px;

}

.button:hover span:after {

  opacity: 1;

  right: 0;

}

</style>

</head>

<body>

<h2>按钮动画</h2>

<button class="button" style="vertical-align:middle"><span>Hover </span></button>

</body>

</html>

点击时添加 "波纹" 效果:


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

39

40

41

42

43

44

45

46

47

48

49

<!DOCTYPE html>

<html>

<head>

<style>

.button {

    position: relative;

    background-color: #4CAF50;

    border: none;

    font-size: 28px;

    color: #FFFFFF;

    padding: 20px;

    width: 200px;

    text-align: center;

    -webkit-transition-duration: 0.4s; /* Safari */

    transition-duration: 0.4s;

    text-decoration: none;

    overflow: hidden;

    cursor: pointer;

}

.button:after {

    content: "";

    background: #90EE90;

    display: block;

    position: absolute;

    padding-top: 300%;

    padding-left: 350%;

    margin-left: -20px!important;

    margin-top: -120%;

    opacity: 0;

    transition: all 0.8s

}

.button:active:after {

    padding: 0;

    margin: 0;

    opacity: 1;

    transition: 0s

}

</style>

</head>

<body>

<h2>按钮动画 - 波纹效果</h2>

<button class="button">Click Me</button>

</body>

</html>

点击时添加 "压下" 效果:


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

<!DOCTYPE html>

<html>

<head>

<style>

.button {

  display: inline-block;

  padding: 15px 25px;

  font-size: 24px;

  cursor: pointer;

  text-align: center;   

  text-decoration: none;

  outline: none;

  color: #fff;

  background-color: #4CAF50;

  border: none;

  border-radius: 15px;

  box-shadow: 0 9px #999;

}

.button:hover {background-color: #3e8e41}

.button:active {

  background-color: #3e8e41;

  box-shadow: 0 5px #666;

  transform: translateY(4px);

}

</style>

</head>

<body>

<h2>按钮动画 - "按压效果"</h2>

<button class="button">Click Me</button>

</body>

</html>

时间： 2024-10-07 14:35:23

css3学习笔记之按钮的相关文章

CSS3学习笔记

这两天的CSS3学习笔记: 慕课网课程地址: http://www.imooc.com/learn/33 笔记: 边框: 圆角效果border-radius:同border相同的缩写方式: 阴影box-shadow: 参数说明: 说明: 单位除了用px也可以用百分比: 多个阴影:用逗号隔开即可: 模糊半径与扩展半径的区别: 阴影模糊半径:此参数可选,其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊: 阴影扩展半径:此参数可选,其值可以是正负值,如果值为正,则整

IDA学习笔记--VS2008按钮事件捕捉

http://blog.csdn.net/ccnyou/article/details/8521611 IDA笔记--VS2008按钮事件捕捉 用到工具: IDA Proc C32Asm Rescope VS2008 LordPE 实例程序:MFCDemo.exe(附下载链接),我们目标是找到Button1对应的函数的地址处 附件包含:博客文章原文文档,文章中用到的MFCDemo程序. 下载链接:http://download.csdn.net/detail/ccnyou/5012040 1,首

css3学习笔记三

css3有些特殊的元素选择器这和jquery相似.效果图如下 黑色的小球是旋转3D效果不是特别明显,主要是学习的是对每个小球的控制.上代码. <!DOCTYPE html><html>  <head>    <title>Ball.html</title>        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"&g

HTML5+CSS3学习笔记（一）

前段时间一直在学Python,不仅仅只是学Python的基础语法,还有科学计算,主要是Numpy和Matplotlib,爬虫,暂时还没有用到Scrapy那么高端的库,还停留在Python自带的urrllib模块,还有BeautifulSoup解析器,我发现,Web的问题,始终绕不过去.不得不承认的是,Web已经成为数据获取的主要渠道,所以有必要了解其机理性的一些规则,更何况,话有一点小私心,就是想做一个个人网站出来.总而言之,Web的知识是必须得学的,最直接的,自然就是HTML.CSS和Java

十天精通CSS3学习笔记 part4

CSS3中的变形与动画(下) CSS3 Keyframes介绍 Keyframes 被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主要以"@keyframes"开头,后面紧跟着是动画名称加上一对花括号"{-}",括号中就是一些不同时间段样式规则. @keyframes changecolor{ 0%{ background: red; } 100%{ background: green; } } 在一个"@keyframes"中的样式

我的CSS3学习笔记

1.元字符使用: []: 全部可选项 ||:并列 |:多选一 ?: 0个或者一个 *:0个或者多个 {}: 范围 2.CSS3属性选择器: E[attr]:存在attr属性即可: E[attr=val]:属性值完全等于val E[attr*=val]:属性值里包含val字符并且在"任意"位置 E[attr^=val]:属性值里包含val字符并且在"开始"位置 E[attr$=val]:属性值里包含val字符并且在"结束"位置 3.CSS3伪类选择

CSS3学习笔记——伪类hover作用于子元素

最近看到一篇文章:“Transition.Transform和Animation使用简介及应用展示”    ,想看看里面 “不同缓动类效果demo” 例子的效果,发现了一个问题如下: .Trans_Box :hover (冒号前空格)这个伪类只能作用于 .trans_box中的子元素,鼠标移到自身时只能激发其子元素的样式发生改变. <!--Html部分代码--><div id="hhh" class="Trans_Box"> <div

HTML5+CSS3学习笔记（二） 页面布局：HTML5新元素及其特性

HTML5新元素及其特性 HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. 本次学习HTML5的新标签元素有: <header>定义页面或区段的头部: <footer>定义页面或区段的尾部: <nav>定义页面或区段的导航区域: <section>页面的逻辑区域或内容组合: <article>定义正文或一篇完整的内容: <aside>定义

CSS3学习笔记（5）—页面遮罩效果

今天把页面遮罩的效果发一下,之前遮罩都是用JS实现的,忽然发现CSS3里面的box-shadow属性除了做立体阴影外,还可以做页面的遮罩~~~~ 下面来看一下完成的动态效果: 从上图可以看出,就是当鼠标悬浮在按钮上时,会出现整个页面的遮罩,当然调一下透明度就是网页中经常看到的当鼠标悬浮在一张图片上时,周围的其他图片都被遮罩了,这样就达到了突出这张图片的效果,其实这个效果做出来很简单~~~~~ 一.主体程序: <!DOCTYPE html> <html> <head> &