纯css3打造能够弹起和按下的按钮,css3按钮代码

╰半夏微凉° 2022-11-10 05:36 161阅读 0赞

<title>纯css3打造能够弹起和按下的按钮,css3按钮代码</title>
    <style>
    	a.button {
         
    		position: relative;
    		color: rgba(255,255,255,1);
    		text-decoration: none;
    		background-color: rgba(219,87,5,1);
    		font-family: 'Yanone Kaffeesatz';
    		font-weight: 700;
    		font-size: 3em;
    		display: block;
    		padding: 4px;
    		-webkit-border-radius: 8px;
    		-moz-border-radius: 8px;
    		border-radius: 8px;
    		-webkit-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
    		-moz-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
    		box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
    		margin: 100px auto;
    		width: 160px;
    		text-align: center;
    		-webkit-transition: all .1s ease;
    		-moz-transition: all .1s ease;
    		-ms-transition: all .1s ease;
    		-o-transition: all .1s ease;
    		transition: all .1s ease;
    	}
    	a.button:active {
         
    		-webkit-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
    		-moz-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
    		box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
    		position: relative;
    		top: 6px;
    	}
    </style>
    </head>	
    <body>
    
    <a href="javascript:void(0);" class="button">点击我</a>
    
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，161人围观）

还没有评论，来说两句吧...

相关阅读

相关纯css3打造能够弹起和按下的按钮,css3按钮代码

<title>纯css3打造能够弹起和按下的按钮,css3按钮代码</title> <style> a.button {

╰半夏微凉°/ 2022年11月10日 05:36/ 0 赞/ 162 阅读

相关 html鼠标悬停按钮效果,纯css3实现的鼠标悬停动画按钮

今天给大家带来一款纯css3实现的鼠标悬停动画按钮。这款按钮鼠标经过前以正方形的形式，当鼠标经过的时候以动画的形式变成圆形。效果图如下： ![09a8e28f276a625f

淩亂°似流年/ 2022年10月06日 05:58/ 0 赞/ 321 阅读

相关纯CSS3单选按钮选中美化js特效

[下载地址][Link 1] 纯CSS3单选按钮选中美化特效是一款纯css3制作radio单选按钮选中美化，单选框选中边框变色ui特效。 ![69bbf972c03e1c2

分手后的思念是犯贱/ 2022年09月16日 06:14/ 0 赞/ 225 阅读

相关纯CSS 3D样式开关按钮

[下载地址][Link 1] 使用纯CSS代码实现的3D样式开关按钮，可以作为切换选择等功能。 ![1633956696.png][] dd: [Link 1]: h

男娘i/ 2022年09月16日 04:51/ 0 赞/ 247 阅读

相关 css3 按钮翻转效果

css3 按钮翻转效果 ![css3 按钮翻转][css3] ![css3 按钮翻转][css3 1] ![css3 按钮翻转][css3 2] html

末蓝、/ 2022年09月03日 07:19/ 0 赞/ 279 阅读

相关网页按钮效果css3,css3按钮效果

/\ Box colors \/ .bg-1 \{ background:\ECEFF1; color:\37474f; \} /\ Common button st

た入场券/ 2022年09月02日 14:53/ 0 赞/ 262 阅读

相关 Android 代码实现按钮按下弹起事件

//发送按钮添加按下弹起事件 // send.setOnTouchListener(new OnTouchListener() // \{ // @Override

男娘i/ 2022年07月28日 08:38/ 0 赞/ 202 阅读

相关 css 按钮按下样式

在项目开发中，按钮通常需要添加按钮的获得焦点状态，电脑端用 :hover 移动端用 :active 。多个按钮需要添加时，就得添加多个获得焦点样式。可通过添加背景图片的方式

布满荆棘的人生/ 2022年02月20日 05:17/ 0 赞/ 541 阅读

相关纯CSS3打造精美按钮

利用CSS3实现精美按钮，效果如下图所示，也可以狠狠点击[这里][Link 1]。前端开发whqet，关注前端开发技术分享网页相关资源。 ![201305132148111

墨蓝/ 2022年02月20日 00:57/ 0 赞/ 278 阅读

相关 CSS3美化单选按钮和复选按钮

1.html <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-

迷南。/ 2021年09月13日 14:46/ 0 赞/ 581 阅读