CSS实现发光的按钮效果(代码示例)


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

按钮的效果我们经常会用得到,本篇文章就来给大家分享一个漂亮的按钮效果的实现,我们来使用CSS实现一个发光的按钮效果。

话不多说,我们直接来看代码

以下代码是接下来所有按钮样式的基本代码:

HTML

1

<a class="button" href="#">Button</a>

CSS

1

2

3

4

5

6

7

8

9

10

11

12

13

.button {

width:80px;

height:20px;

  display: block

  padding: 1em 3.2em

  border-radius: 1.6em

  color: #fff

  font-size: 18px

  font-family: 'Lato', sans-serif

  font-weight: 700

  text-align: center

  text-decoration: none;

  }

下面button1到button4改变的是基本颜色,并且还通过box-shadow调整按钮主体的颜色透射率来描述用于每个按钮的阴影。从button5开始设计具有渐变效果的按钮。下面我们来看具体的代码实现。

button1:

1

2

3

4

.button {

  background-color: rgba(252, 28, 143, 1); 

  box-shadow: 0 5px 20px rgba(252, 28, 143, .5);

}

效果如下:

360截图20181120110625360.jpg

button2:

1

2

3

4

.button{

background-color: rgba(251, 152, 11, 1); 

box-shadow: 0 5px 20px rgba(251, 152, 11, .5);

}

效果如下:

360截图20181120110909112.jpg

button3:

1

2

3

4

.button {

  background-color: rgba(241, 196, 15, 1); 

  box-shadow: 0 5px 20px rgba(241, 196, 15, .5);

}

效果如下:

360截图20181120111045110.jpg

阅读剩余部分

相关阅读 >>

几种关于html和css的使用方法

div css怎么实现显示隐藏

css中font属性能不按顺序吗

css的四种引入方式分别是什么

css怎么消除默认样式

jsp怎么引入css

jquery怎么改变css样式

css盒子模型是什么意思?

css如何增加权重

什么是css,其主要作用是什么

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




打赏

取消

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

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

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

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

评论

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