精华内容
下载资源
问答
  • css3打造能够弹起和按下的按钮,css3按钮代码</title> <style> a.button { position: relative; color: rgba(255,255,255,1); text-decoration: none; background-color: rgba(219,87,5,1); ...
    <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>
    
    展开全文
  • Js+Css做一个可弹起压下效果的按钮

    千次阅读 2018-10-17 10:13:40
    好几天没写js和css了,昨天看一个大神的博客的时候无意中看到他的一个效果做的很不错,思来想去觉得自己做一个会比较好,毕竟,本来就是一个学习的过程! 效果:  我们今天做一个这样的按钮! 我首先说一下我...

    好几天没写js和css了,昨天看一个大神的博客的时候无意中看到他的一个效果做的很不错,思来想去觉得自己做一个会比较好,毕竟,本来就是一个学习的过程!

    效果:

     我们今天做一个这样的按钮!

    我首先说一下我的思路,我刚开时看到的时候在想,无非就是画一个背景阴影,然后利用js改变阴影的宽度,但是这样有一个问题就是上面的字体不会改变,我开始是做成了这样的:

    这里很明显就看出来了是有问题的,上面的字体没有改变位置,说明我的思路是不对的,然后我在想,那么既然不改变阴影的宽度,只能是改变按钮本身的位置了,但是他在页面上怎么改变按钮的位置呢?给他一个相对固定的位置不就行了吗?于是就想到最外侧加一个div就可以了!

    源码:

    <!DOCTYPE html>
    <!--
    	@author : clearlove
    	@Aim:CSDNTest
    	@Date :2018-10
    	
    -->
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    		div{
    				height: 40px;
    				width: 150px;
    			}
    		.submit {
    		    width: 100px;
    		    height: 36px;
    		    background-color: #f0f3f9;
    		    color: #333;
    		    overflow: visible;
    		    cursor: pointer;
    		    box-shadow: 2px 2px #AFC4EA, 3px 3px #AFC4EA, 4px 4px #AFC4EA;
    		    font-size: 14px;
    		    padding-left: 0.5rem;
    		    margin-left: 0px;
    		    margin-top: 0px;
    		    border-radius: 15px;
    		    border-color: 2px solid #f0f3f9;
    		}
    		.submit_1 {
    		    width: 100px;
    		    height: 36px;
    		    background-color: #f0f3f9;
    		    color: #333;
    		    overflow: visible;
    		    cursor: pointer;
    		    box-shadow: 1px 1px  #AFC4EA, 2px 2px #AFC4EA, 3px 3px #AFC4EA;
    		    font-size: 14px;
    		    padding-left: 0.5rem;
    		    margin-left: 1px;
    		    margin-top: 1px;
    		    border-radius: 15px;
    		    border-color: 2px solid #f0f3f9;
    		}
    		</style>
    	</head>
    	<body>
    		<div>
    			<input type="button" name="" id="submit" class="submit" value="点击测试" onmousedown="mousedown()" onmouseup="mouseup()"/>
    		</div>
    	</body>
    	<script type="text/javascript">
    		var _submit = document.getElementById("submit");
    		function mousedown(){
    			document.getElementById("submit").className="submit_1";
    		}
    		function mouseup(){
    			document.getElementById("submit").className="submit";
    		}
    	</script>
    </html>
    

    ok,这个基本就是比较合理的,这个其实主要用到的没有什么新技术,只是一些不是很常用的css,加阴影的关键字:

    box-shadow

     这个关键字可以直接打扫W3Cschool里面看详解,这里就不班门弄斧了!

    喜欢我的文章的可以关注一下,我会持续更新前后端的一些技术的!

    谢谢阅读!

    展开全文
  • 实现按钮弹起效果

    2015-05-10 14:29:09
    实现了按下按钮按钮颜色发生变化 android:textColor="@drawable/button_registe" />在drawable文件夹下新建一个values xml文件,取名button_registe.xml...

    实现了按下按钮按钮颜色发生变化

    <Button
            android:textColor="@drawable/button_registe"
            />

    在drawable文件夹下新建一个drawable resource file,取名button_registe.xml

    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:color="@color/blue"
            android:state_pressed="false"/>
        <item android:color="@color/red"
            android:state_pressed="true"/>
    </selector>
    
    展开全文
  • CSS制作 开关按钮(按下去、起来).zip
  • 使用纯CSS3的一些很棒的可按下社交媒体按钮怎么样? 听起来很酷,就是今天要为您存储的内容。 我将向您展示如何创建一些可以放置在任何项目中的超酷按钮,让我们开始吧!〜 第1步:制作一些HTML标记 这里的...

    css按钮按下改按钮颜色

    嗨! 我有个快速提示。 使用纯CSS3的一些真正很棒的可按下社交媒体按钮怎么样? 听起来很不错……今天就是您要存储的东西。 我将向您展示如何创建一些非常酷的按钮,您可以将其放置在任何项目中,让我们开始吧!


    第1步:制作一些HTML标记

    这里的标记非常简单,简洁,只需要几行代码。

    对于我们的主类,我们将使用.container,仅当您希望自己的外观与本教程完全相同时才使用。 我们使用它来将按钮放置在画布的中央。
    接下来,我们将使用跨度来包装按钮,并使用类.button在CSS文件中使用边距创建一些间距。
    最后,我们将简单地添加一个链接,一个图标和一些要放在按钮上的文本。

    <div class="container">
            <span class="button fb">
                <a href="#"><img src="http://webdesigntutsplus.s3.amazonaws.com/167_QuickTip_CSS3Buttons/images/fb.gif" alt="" />Like It</a>
            </span>
            
            <span class="button twit">
                <a href="#"><img src="http://webdesigntutsplus.s3.amazonaws.com/167_QuickTip_CSS3Buttons/images/tweet.gif" alt="" />Tweet It</a>
            </span>
            
            <span class="button mail">
                <a href="#"><img src="http://webdesigntutsplus.s3.amazonaws.com/167_QuickTip_CSS3Buttons/images/mail.gif" alt="" />Email</a>
            </span>
        </div>

    以上就是CSS3按钮HTML标记,您现在应该有了类似的东西...


    第2步创建一些很棒的样式!

    我们要添加的第一件事是具有漂亮的蓝色砾石背景的主体,可以在源文件中找到它。 然后,我们将颜色设置在链接上,并对容器进行样式设置,以使margin:0 auto在画布上居中。
    将按钮放在自己的项目中时,这三种样式都不是必需的,但是您可能希望为它们创建特定的链接样式,并且可以使用.button> a来定位它。

    body{
        background: url(../images/bg.jpg) repeat 0 0;
    }
    
    a{
        text-decoration: none;
    	color:#333333;	
    }
    
    .container{
        width: 420px;
    	margin: 10% auto 0; /* buttons pushed from the top by 10% */
    }

    现在让我们在按钮之间创建一些间距,如下所示:

    .button{
        margin: 8px;	
    }

    “以用户希望按下按钮的方式来设置按钮的样式。”

    现在我们有了一些不错的间距,我们可以开始以用户希望按下按钮的方式来设置按钮样式。

    通过创建一个漂亮的渐变色和一个盒子阴影,我们可以使按钮弹出一点,使其更具可点击性。 然后,在顶部,底部和侧面添加一些填充,使按钮更易于阅读。

    .button a{
    	font-family:font-family: 'Arvo', arial, serif;;
    	font-size:16px;
    	background: #ffffff; /* Old browsers */
    	background: -moz-linear-gradient(top, #ffffff 0%, #dfdfdf 100%); /* FF3.6+ */
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#dfdfdf)); /* Chrome,Safari4+ */
    	background: -webkit-linear-gradient(top, #ffffff 0%,#dfdfdf 100%); /* Chrome10+,Safari5.1+ */
    	background: -o-linear-gradient(top, #ffffff 0%,#dfdfdf 100%); /* Opera11.10+ */
    	background: -ms-linear-gradient(top, #ffffff 0%,#dfdfdf 100%); /* IE10+ */
    	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dfdfdf',GradientType=0 ); /* IE6-9 */
    	background: linear-gradient(top, #ffffff 0%,#dfdfdf 100%); /* W3C */
        -moz-border-radius: 3px;
    	-webkit-border-radius: 3px;
    	border-radius: 3px;
    	-moz-box-shadow: 0 3px 4px -1px #464646;
    	-webkit-box-shadow: 0 3px 4px -1px #464646;
    	box-shadow: 0 3px 4px -1px #464646;
    	padding: 6px 12px;	
    }

    现在,我们继续使用:hover选择器将按钮稍微展平,使其看起来处于按下状态。 我们还将使用:focus选择器,以便我们可以保留这些样式,而不必重复该状态的代码。

    .button a:hover, .button a:focus{
        background: #dfdfdf; /* Old browsers */
    	background: -moz-linear-gradient(top, #dfdfdf 0%, #ffffff 100%); /* FF3.6+ */
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dfdfdf), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
    	background: -webkit-linear-gradient(top, #dfdfdf 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
    	background: -o-linear-gradient(top, #dfdfdf 0%,#ffffff 100%); /* Opera11.10+ */
    	background: -ms-linear-gradient(top, #dfdfdf 0%,#ffffff 100%); /* IE10+ */
    	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dfdfdf', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
    	background: linear-gradient(top, #dfdfdf 0%,#ffffff 100%); /* W3C */
    	-moz-box-shadow: 0 1px 1px 0 #666666;
    	-webkit-box-shadow: 0 1px 1px 0 #666666;
    	box-shadow: 0 1px 1px 0 #666666;
    }

    右侧的按钮是悬停状态的外观。

    创建悬停效果后,当用户单击鼠标时,我们将在按钮上添加一些插图,使其看起来就像用户将按钮按入背景一样。 在这种技术中,我们需要使用两个阴影,并且只需在每个阴影之间放置一个逗号即可。 支持多个阴影

    .button a:focus{
        -moz-box-shadow: 2px 3px 2px -1px #464646 inset, 0 1px 1px 0 #666666;
    	-webkit-box-shadow: 2px 3px 2px -1px #464646 inset, 0 1px 1px 0 #666666;
    	box-shadow: 2px 3px 2px -1px #464646 inset, 0 1px 1px 0 #666666;
    }

    此时,您应该具有下图所示的图像,带有插入按钮或聚焦状态(示例左按钮)。

    最后,我们在图标和按钮文本之间放置了一个正确的填充,然后需要向下移动图标以使其对齐,并在不干扰其他元素的情况下做到这一点,最好的解决方案是放置一个相对位置以保持它包含在.button中,然后将其从顶部向下推2个像素。 通过使用top而不是padding-top或margin-top,我们只影响图像而不是整个按钮。

    .button a > img{
    	padding-right: 8px;
        position: relative;
        top: 2px;
    }

    好的,就是样式了,您应该最终得到这样的东西...

    如果您的图片与上图不完全相同,请返回并检查您的作品。

    这就是她写的全部...

    很好! 您已经创建了一些非常棒CSS3按钮,这些按钮使用户想要采取行动。 感谢您的参与,我衷心希望您在本课程中学到了一些新的宝贵知识。
    请继续关注更多教程,以您的方式来做。 您也可以在作者简介下方的Envato市场上查看我的一些产品。

    请在下面留下任何问题或评论。

    翻译自: https://webdesign.tutsplus.com/articles/quicktip-pressable-css3-social-buttons--webdesign-3330

    css按钮按下改按钮颜色

    展开全文
  • CSS3实现像键盘按键被按进去的弹性按钮效果,鼠标点击按钮按钮被压下去,松开鼠标则重新上来,有种机械感的CSS3按钮特效,用了JS和HTML5的相关方法来实现,效果请参见演示图片。
  • 问题描述:移动端页面输入框聚焦伴随着键盘弹起,底部按钮浮到键盘上方,此时如果直接点击底部按钮进行查询操作,进入到的下一页的列表页面高度渲染会出现问题。 解决思路:在键盘弹起时,不让原本固定在底部的...
  • ios底部按钮无法自动弹起,亦无法通过监听window.onresize监听窗口变化 解决: 将底部按钮css设为 position: absolute; bottom: 0; 本人使用的api var sys = api.systemType; //监听设备系统 var bHeight, ...
  • 按钮下拉菜单 结合使用.btn-group(btn-group-lg/...向上弹起的下拉菜单 //源码,css实现方式主要是设置.dropdown-menu样式容器的bottom为100% .dropup .dropdown-menu, .navbar-fixed-bottom .dropdown .dropdown-menu
  • css按钮有四种状态...} 可以去除按钮或a标签点击后的蓝色边框下面的例子中.btn1用focus按钮会按下,不弹起.btn2用active按钮点击按下,会弹起html:Save SettingsSubmitCSS:.btn{appearance: none;background:...
  • css按钮有四种状态...} 可以去除按钮或a标签点击后的蓝色边框下面的例子中.btn1用focus按钮会按下,不弹起.btn2用active按钮点击按下,会弹起html:Save SettingsSubmitCSS:.btn{appearance: none;background:...
  • css实现按钮凸起和凹陷效果

    千次阅读 2020-12-15 20:49:06
    今天用CSS实现一下按钮按下凹陷和弹起凸起的效果。 先来看看效果吧: html: <div class="btn-list"> <div class="btn active"> <span class="btn-text">按钮1</span> </div> <...
  • 解决fixed定位按钮在底部,键盘弹起,底部按钮被顶上去 var h=$(window).height(); $(window).resize(function() { if($(window).height()<h){ $('.footer').hide(); } if($(window).heigh...
  • css按钮的四种状态

    2017-12-07 23:05:00
    css按钮有四种状态 1. 普通状态2. hover 鼠标悬停状态3.... .btn:focus{outline:0;} 可以去除按钮或a标签...下面的例子中.btn1用focus按钮会按下,不弹起 .btn2用active按钮点击按下,会弹起 <button class="...
  • 当我们写一个页面有键盘弹起且底部按钮fixed时你会发现点击输入框是底部按钮弹起,网上很多方法但是只适用于对应的场景,今天我们来学习一种Vue 页面的键盘弹起。 phone 解决办法: 换个思路,检测浏览器的resize...
  • 页面效果如图所示: input/texteare输入框回去焦点,键盘弹起。固定定位在底部的按钮 被顶起。 原因,页面size 变化。 在这里插入代码片 解决办法: 检测浏览器的resize事件,当高度过小时就可以判定为出现这种情况...
  • 问题描述:移动端,当需要输入内容时,软键盘弹出往往会导致固定在底部的按钮、导航栏等被弹起。 解决思路: 1.当键盘弹起时隐藏掉按钮,键盘隐藏时按钮显示 2.监测键盘是否弹起(浏览器页面是否发生变化) 代码: 1...
  • 在使用 bootstrap框架中 发现 html...在bootstrap.min.css 中有下面这段代码影响:.btn.active.focus, .btn.active:focus,.btn.focus, .btn:active.focus,.btn:active:focus, .btn:focus {outline: 5px auto -web...
  • 不需要JS实现的浮动过显示立体效果,纯CSS实现按钮效果
  • 1 按钮下拉菜单结合使用.btn-group(btn-group-lg/btn-group-sm/btn-group-xs) .dropup .btn .dropdown-menu 按钮下拉菜单是在普通的下拉菜单的基础上封装了....向上弹起的下拉菜单//源码,css实现方式主要是设置.dro
  • 毕竟css3自己带了一个:hover的选择器,能够帮我们很快的就做出悬浮的样子。那么,先看看悬浮怎么写的 &amp;lt;div id='test' class='moveclass'&amp;gt;X&amp;lt;/div&amp;...
  • 第四步:watch监控比较,判断按钮是否该显示出来 watch: { screenHeight ( val ) { if ( this .originHeight != val ) { this .isOriginHei = false ; } else { this .isOriginHei = true ; } } ...
  • 2使用到的技术有CSS3动画,背景图片设置,伪类选择器和伪元素的使用,元素的缩放,元素类名的添加与去除等等 具体如何操作见代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&...
  • 在做项目的过程中,发现固定定位在底部的button按钮被手机弹起的软键盘顶起来,非常的影响页面的美观,经过查看资料,终于解决了问题: -------html的内容----- &lt;div class="hold" v-show="...
  • 按钮包裹时间控件的输入框并隐藏
  • ------------------------------------------------------input框时输入框出,ios显示正常:(如下)--------------------------------------- --------------------------------------------------------但是...
  • css3动画之上下弹跳

    2019-12-10 15:42:45
    需求: 实现小球的上下弹跳,模拟在向下时模拟受重力效果而产生变形 代码: <!DOCTYPE html> <html lang="en"> ...meta name="viewport" content="width=device-width, initial-scale...
  • html页面在安卓或ios中fixed 页面底部的按钮常常会被弹起,如图,当input获取焦点唤起软键盘的时候,下一步按钮被悬在半空中,那么如何解决呢? 起初,顶部餐饮商家头部是fixed在顶部,下一步按钮fixed在页面...
  •  按钮的向下向上三角形-向上弹起的下拉菜单  <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->   rel="stylesheet"   href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"   ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 16,836
精华内容 6,734
关键字:

css按钮弹起