精华内容
下载资源
问答
  • 解压密码:RJ4587 今天我们要给大家分享一款基于jQuery和CSS3的状态激活动画按钮按钮一共有4种状态,第一种状态是按钮默认时的样式,鼠标滑过按钮时就出现待激活的第二种状态,点击按钮后就出现正在激活的第三种...
  • //按钮激活的样式 .el-button:active { background: rgb(4, 102, 73); border-color: rgb(4, 102, 73); color: #fff; } //按钮悬浮和取得焦点状态的样式 .el-button:focus, .el-button:hover { background: ...
    //按钮激活的样式
    .el-button:active {
        background: rgb(4, 102, 73);
        border-color: rgb(4, 102, 73);
        color: #fff;
      }
      
     //按钮悬浮和取得焦点状态的样式
    .el-button:focus,
    .el-button:hover {
        background: #48D1CC;
        border-color: #48D1CC;
        color: #fff;
    }
     //按钮原始状态 
    .el-button {
        color: #FFF;
        background-color: rgb(4, 102, 73);
        border-color: rgb(4, 102, 73);
    }
    
    展开全文
  • CSS 按钮式链接

    2018-02-21 22:11:34
    按钮式链接在任何...CSS 链接默认是行内元素,只能通过链接文本来激活链接。要想让链接像按钮一样,较大的点击区域,其实很简单。只需为链接添加合适的内边距,并设置类似按钮的背景和边框即可。a { padding: ...

    在任何浏览器下,默认的链接都太过平淡,不能满足大多数人的需求。尤其是希望有特大点击区域的链接,比如制作主导航链接、手风琴菜单、按钮等链接时,默认的链接更是无能为力,而按钮式链接便可担此重任。

    链接默认是行内元素,只能通过链接文本来激活链接。要想让链接像按钮一样,较大的点击区域,其实很简单。只需为链接添加合适的内边距,并设置类似按钮的背景和边框即可。

    
    
    1. a  {
    2.     padding: 10px 18px;
    3.     color: #fff;
    4.     font-size: 14px;
    5.     font-weight: bold;
    6.     border-radius: 4px;
    7.     background: #f74c4c;
    8.     text-decoration: none;
    9. }

    运行结果如图 6‑1 所示:

    按钮式链接图6-1 按钮式链接

    为了提高页面的可访问性,跟普通超链接一样,也要为按钮式链接定义其他两个状态下的样式,一个是鼠标悬停和获取焦点的状态,一个是激活状态。

    
    
    1. a:hover,  a:focus {
    2.     background: #f14b00;
    3. }
    4. a:active  {
    5.     background: #f1004b;
    6. }

    对于简单的按钮,修改背景颜色就很合适,但对于比较复杂的按钮,可能需要使用背景图像。一般需要 3 个图像,一个用于默认状态,一个用于鼠标悬停和获取焦点的状态,一个用于激活状态。然后,为不同的状态应用不同的背景,就可以让不同状态下的链接,具有不同的风格。

    关于作者

    歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

    展开全文
  • 去除之前,关闭按钮有高亮边框 给元素加上id,在css中添加两行去除边框和外显就行,这是去除之后
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<link rel="stylesheet" href="css/test.css" />
    		<link rel="stylesheet" href="css/foundation5.5.3.css" />
    		<link rel="stylesheet" href="css/foundation-icons.css" />
    
    		<script src="js/jQuery3.2.1.js"></script>
    		<script src="js/foundation5.5.3.js"></script>
    		<script src="js/modernizr.js"></script>
    		<title></title>
    	</head>
    	<body style="background:linear-gradient(to top, #c79081 0%, #dfa579 100%);">
    		<div class="sticky">
    			<nav class="top-bar" data-topbar>
    				<ul class="title-area">
    					<li class="name">
    						<h1><a href="#">Button的点击出现黑色外边框的取消测试</a></h1>
    					</li>
    					<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
    				</ul>
    
    				<section class="top-bar-section">
    					<ul class="left">
    						<li class="active"><a href="#">Home</a></li>
    						<li><a href="#">Page 1</a></li>
    						<li><a href="#">Page 2</a></li>
    						<li><a href="#">Page 3</a></li>
    					</ul>
    				</section>
    			</nav>
    		</div>
    		
    		<div style="padding:20px;">
    			<div class="panel radius">
    				<h3>1.在外部css中使用元素选择器更改控件样式</h3>
    				<button type="button" class="button success">
    					<i class="fi-music"></i> Music
    				</button>
    				<button type="button" class="button success">
    					<i class="fi-laptop"></i> Laptop
    				</button>
    				<button type="button" class="button success">
    					<i class="fi-home"></i> Home
    				</button>
    			</div>
    		</div>
    		
    		<div style="padding:20px;">
    			<div class="panel radius">
    				<h3>2.在JS中动态添加控件</h3>
    				<button type="button" class="button round warning">
    					<i class="fi-play"></i> Start
    				</button>
    			</div>
    		</div>
    
    		<script>
    			$(document).ready(function() {
    				$("button:eq(3)").click(function(){
    					$(this).after("<button type='button' class='button success'><i class='fi-home'></i> Home</button>");
    				})
    				
    				$(document).foundation();
    			})
    		</script>
    	</body>
    </html>
    
    

    关键CSS:

    button{
    	border: none;
    	outline: medium;
    }
    
    

    在这里插入图片描述

    展开全文
  • 1. :hover伪类在触屏上表现不完美,在Android的WebView中,WebKit会处理touch事件和mouse事件,当手指停留在按钮上,hover状态的确被触发,但是当手指保持接触屏幕并离开按钮,hover状态依然保留。所以需要借助:...
  • css 按钮隐藏复选框View demo 查看演示Download Source 下载源Hello everyone! For a while now, I’m having fun with the new CSS properties (CSS3). It’s an incredible playground for ...
    css 按钮隐藏复选框

    css 按钮隐藏复选框

    Button Switches with Checkboxes and CSS3 Fanciness

    Hello everyone! For a while now, I’m having fun with the new CSS properties (CSS3). It’s an incredible playground for creativity and cleverness. I particularly enjoy designing and creating UI elements like buttons, switches, toggles and such. That’s the focus of this tutorial, I’ll show you how to create button switches with CSS only, without a line of JavaScript. Ready for it? A few things before starting:

    大家好! 现在有一段时间,我在玩新CSS属性(CSS3)。 这是创造力和智慧不可思议的游乐场。 我特别喜欢设计和创建UI元素,例如按钮,开关,切换键等。 这就是本教程的重点,我将向您展示如何仅使用CSS而不使用JavaScript来创建按钮开关。 准备好了吗? 开始之前的几件事:

    • You won’t see any vendor prefixes in the CSS snippets, but you will of course find them in the files.

      您不会在CSS片段中看到任何供应商前缀,但是您当然会在文件中找到它们。
    • We won’t use much transitions between states because we often use pseudo-elements to reduce the number of elements to its minimum, and as of writing, only Firefox supports transitions/animations on pseudo-elements.

      我们不会在状态之间使用过多的过渡,因为我们经常使用伪元素将元素的数量减少到最少,并且在撰写本文时,只有Firefox支持伪元素的过渡/动画。
    • We’ll use the “checkbox hack” (see below).

      我们将使用“复选框黑客”(如下所示)。
    • I personally use the box-model where [width] = [element-width] + [padding] + [borders]. I activate it with the following snippet:

      我个人使用[[width] = [element-width] + [padding] + [borders]的盒子模型。 我使用以下代码段激活它:
    
        *,
        *:after,
        *:before {
            box-sizing: border-box;
        }
    
    

    关于“复选框黑客”(About the “Checkbox Hack”)

    The checkbox hack allows us to have a toggle handler in pure CSS. It relies on a checkbox (which is either checked or unchecked), the :checked pseudo-selector, and a sibling selector (~ or +). Basically, you can say “if the checkbox is checked, then the following X element is behaving like this”. The old way consisted of having a checkbox with an ID, and a label tag with a “for” attribute calling the checkbox ID. This technique allowed to hide the checkbox and still toggle it by clicking on the label. The only problem with this approach it that mobile Safari doesn’t support it. So we have a workaround for that: turn the checkbox invisible with the opacity property, set it on top of whatever element you want (I still use label) and there you go, when clicking the element, you are actually clicking the checkbox! The code looks like this:

    复选框hack允许我们在纯CSS中有一个切换处理程序。 它依赖于一个复选框(已选中或未选中)、: checked伪选择器和同级选择器(〜或+)。 基本上,您可以说“如果选中此复选框,则以下X元素的行为如下所示”。 以前的方法包括:拥有一个带有ID的复选框和一个带有“ for”属性的标签标签,以调用该复选框的ID。 这种技术允许隐藏复选框,并仍然可以通过单击标签来切换它。 这种方法的唯一问题是移动Safari不支持它。 因此,我们有一个解决方法:使用opacity属性使复选框不可见,将其设置在所需的任何元素之上(我仍在使用标签),然后单击该元素,实际上就是在单击该复选框! 代码如下:

    
    .switch input {
        /* First, we make it as wide as the container */
        position: absolute;
        width: 100%;
        height: 100%;
        /* Then, we put it on top of everything else */
        z-index: 100;
        /* Last, we make it invisible */
        opacity: 0;
        /* This one is just for ergonomy */
        cursor: pointer;
    }
    
    

    Those 12 lines of CSS will be used in all the following demos, so feel free to copy paste it; it never changes. Note: for another awesome demo including the checkbox hack, you may want to have a look at this tutorial: Annotation overlay effect with CSS3.

    这12行CSS将在以下所有演示中使用,因此随时可以复制粘贴。 它永远不会改变。 注意:对于另一个很棒的演示,包括复选框hack,您可能需要看一下本教程: CSS3的Annotation overlay effect

    例子1 (Example 1)

    Let’s start with a lovely little push button, with a small illuminated LED when it’s on.

    让我们从一个可爱的小按钮开始,当它打开时,它带有一个小的发光LED。

    标记 (The Markup)

    
    <div class="switch">
    	<input type="checkbox">
    	<label></label>
    </div> 
    
    

    The .switch element is our container. Within this very element the checkbox and the label will be positioned on top of each other to allow us to do the magic trick. The input doesn’t need anything more than the checkbox type (no ID, no name, nothing).

    .switch元素是我们的容器。 在此元素内,复选框和标签将位于彼此的顶部,以使我们能够完成魔术。 输入仅需要复选框类型(没有ID,没有名称,什么也没有)。

    And the last element could be anything (an anchor, a div, a span, a label, a bold/italic tag, whatever). I personally chose a label because I used to use the old checkbox hack, which required a label.

    最后一个元素可以是任何内容(锚点,div,范围,标签,粗体/斜体标签等)。 我之所以选择一个标签,是因为我曾经使用过需要标签的旧复选框。

    CSS (The CSS)

    First, we give our button a size by setting the width and height to the container. Be sure the width and the height are the same, or your button won’t be round. Remember to hide the checkbox with the according CSS code at the top of this article.

    首先,我们通过设置容器的宽度和高度来为按钮设置尺寸。 确保宽度和高度相同,否则按钮将不会变圆。 请记住,隐藏带有本文顶部相应CSS代码的复选框。

    
    .switch {
        width: 100px;
        height: 100px;
        position: relative;
    }
    
    

    Then, the label, which is where we’ll add all the styling to. First of all, we set it to block and make it 100% of its parent size (the container). Then, we give it a relative position in order to add some pseudo-elements later.

    然后,在标签上添加所有样式。 首先,我们将其设置为阻止并使其达到其父大小(容器)的100%。 然后,我们给它一个相对位置,以便以后添加一些伪元素。

    Time for some real styles: a background color, a round shape, and some awesome box-shadows to make it look like it’s embossed.

    是时候使用一些真实的风格:背景色,圆形和一些令人敬畏的盒子阴影,使其看起来像浮雕一样。

    
    .switch label {
        display: block;
        width: 100%;
        height: 100%;
        position: relative;
        border-radius: 50%;
        background: #eaeaea;
        box-shadow: 
            0 3px 5px rgba(0,0,0,0.25),
            inset 0 1px 0 rgba(255,255,255,0.3),
            inset 0 -5px 5px rgba(100,100,100,0.1),
            inset 0 5px 5px rgba(255,255,255,0.3);
    }
    
    

    It already looks acceptable, but we need to add some pseudo-elements to make it awesome, right? So let’s go. The first one is meant to improve the embossed look by adding a little recess around the button. So we set it to position absolute, behind the button and we don’t give it any size but we give it some top/right/bottom/left values instead.

    它看起来已经可以接受了,但是我们需要添加一些伪元素使其变得很棒,对吗? 所以走吧第一个旨在通过在按钮周围添加一个小凹槽来改善浮雕外观。 因此,我们将其设置为绝对位置,并位于按钮后面,并且不给它任何大小,而是给它一些顶部/右侧/底部/左侧值。

    And of course, some aesthetics: a soft gradient from top to bottom and some sexy box-shadows.

    当然还有一些美感:从上到下的柔和渐变以及一些性感的盒子阴影。

    
    .switch label:after {
        content: "";
        position: absolute;
        z-index: -1;
        top: -8%; 
        right: -8%; 
        bottom: -8%; 
        left: -8%;
        border-radius: inherit;
        background: #ddd; /* Fallback */
        background: linear-gradient(#ccc, #fff);
        box-shadow: 
            inset 0 2px 1px rgba(0,0,0,0.15),
            0 2px 5px rgba(200,200,200,0.1);
    }
    
    

    And now, the LED, which is the main indicator for the state of the button. Basically, it’s a small circle placed in the middle of the button. A little more fanciness than *just* box-shadows will be used here: a radial gradient. Let’s use a simple one though, just to make the whole thing a little nicer for browsers supporting radial gradients, and make a fallback for others.

    现在,LED是按钮状态的主要指示器。 基本上,它是按钮中间的一个小圆圈。 这里将使用比*仅*框阴影稍大的奇特效果:径向渐变。 不过,让我们使用一个简单的示例,只是为了使整体功能对支持径向渐变的浏览器更好一些,并为其他浏览器提供一个替代。

    
    .switch label:before {
        content: "";
        position: absolute;
        width: 20%;
        height: 20%; 
        left: 40%;
        top: 40%;
        border-radius: inherit;
        background: #969696; /* Fallback */
        background: radial-gradient(40% 35%, #ccc, #969696 60%);
        box-shadow:
            inset 0 2px 4px 1px rgba(0,0,0,0.3),
            0 1px 0 rgba(255,255,255,1),
            inset 0 1px 0 white;
    }
    
    

    Okay, so now, we have a nice button. Let’s deal with the checked state. When you click on the container, you actually click on the invisible checkbox which sits on top of the label. From here, you have activated the checkbox, meaning you can use the :checked state and a sibling selector. The following is like saying “Hey, the input element is checked, so the following label in the .switch element has to be like this. So when the button is turned on, we change the background color of the LED (:before pseudo-element), as well as the background of the button. That’s basically it!

    好的,现在,我们有了一个不错的按钮。 让我们处理检查状态。 当您单击容器时,实际上是单击标签顶部的不可见复选框。 从这里,您已经激活了复选框,这意味着您可以使用:checked状态和同级选择器。 以下内容就像说“嘿,检查输入元素,因此.switch元素中的以下标签必须像这样。 因此,当按钮打开时,我们将更改LED的背景颜色(在伪元素之前:)以及按钮的背景。 基本上就是这样!

    
    .switch input:checked ~ label { /* Button */
    	background: #e5e5e5; /* Fallback */
        background: linear-gradient(#dedede, #fdfdfd);
    }
    
    .switch input:checked ~ label:before { /* LED */
        background: #25d025; /* Fallback */
        background: radial-gradient(40% 35%, #5aef5a, #25d025 60%);
        box-shadow:
            inset 0 3px 5px 1px rgba(0,0,0,0.1),
            0 1px 0 rgba(255,255,255,0.4),
            0 0 10px 2px rgba(0, 210, 0, 0.5);
    }
    
    

    例子2(Example 2)

    In this example we want to come close to an actual light button switch, so let’s see how far we can take it.

    在此示例中,我们希望接近实际的灯光按钮开关,因此让我们看一下它能走多远。

    标记 (The Markup)

    The markup is the same as in the first example; a container, a checkbox and a label:

    标记与第一个示例中的相同; 一个容器,一个复选框和一个标签:

    
    <div class="switch">
    	<input type="checkbox">
    	<label></label>
    </div> 
    
    

    CSS(The CSS)

    We start by setting a size to our button and hiding the checkbox.

    首先,为按钮设置大小并隐藏复选框。

    
    .switch {
        width: 50px;
        height: 100px;
        position: relative;
    }
    
    

    This example requires many more box-shadows to look well. Let’s not forget to add a soft background color and rounded corners, to make the whole thing look even softer:

    此示例需要更多的矩形阴影才能看起来不错。 我们不要忘记添加柔和的背景颜色和圆角,以使整个外观看起来更加柔和:

    
    .switch label {
        display: block;
        width: 100%;
        height: 100%;
        position: relative;
        background: #cbc7bc;
        border-radius: 5px;
        box-shadow:
            inset 0 1px 0 white,
            0 0 0 1px #999,
            0 0 5px 1px rgba(0,0,0,0.2),
            0 2px 0 rgba(255,255,255,0.6),
            inset 0 10px 1px #e5e5e5,
            inset 0 11px 0 rgba(255,255,255,0.5),
            inset 0 -45px 3px #ddd;
    }
    
    

    And now, let’s add some pseudo-elements. The first one is meant to create the housing, the second one to simulate screws. Let’s start with the housing. It’s pretty much the same thing as in our previous example, plus a little border:

    现在,让我们添加一些伪元素。 第一个用于创建外壳,第二个用于模拟螺钉。 让我们从外壳开始。 它与我们之前的示例几乎一样,只是带有一点边框:

    
    .switch label:after {
        content: "";
        position: absolute;
        z-index: -1;
        top: -20px;
        left: -25px;
        bottom: -20px;
        right: -25px;
        background: #ccc; /* Fallback */
        background: linear-gradient(#ddd, #bbb);
        border-radius: inherit;
        border: 1px solid #bbb;
        box-shadow:
            0 0 5px 1px rgba(0,0,0,0.15),
            0 3px 3px rgba(0,0,0,0.3),
            inset 0 1px 0 rgba(255,255,255,0.5);
    }
    
    

    The second one is more interesting, since we only have one element to create two screws. This is one more job for box-shadows! Because we are using a plain color, we can easily make a shadow look like our main element. We could even make 4, 10 or 42 screw holes with this. But we just need two here:

    第二个更有趣,因为我们只有一个元素可以创建两个螺钉。 对于盒子阴影来说,这是另一项工作! 因为我们使用的是纯色,所以我们可以轻松地使阴影看起来像我们的主要元素。 我们甚至可以用它制作4、10或42个螺Kong。 但是我们这里只需要两个:

    
    .switch label:before {
        content: "";
        position: absolute;
        width: 8px;
        height: 8px;
        top: -13px;
        left: 20px;
        background: #666;
        border-radius: 50%;
        box-shadow:
            0 1px 0 white, /* Subtle reflection on the bottom of the hole */
            0 120px 0 #666, /* Faking a second screw hole... */
            0 121px 0 white; /* And its reflection */
    }
    
    

    Now the part of the checked state. In this example only the central part (which is the label) will change when we click it. And we created this material effect only with box-shadows, so easy peasy, let’s just revert them, adapt them, prettify them, and we’re done:

    现在是检查状态的一部分。 在此示例中,单击时仅中心部分(即标签)会更改。 而且,我们仅用盒形阴影创建了这种物质效果,如此简单易用,让我们将它们还原,改编,美化它们,然后完成:

    
    .switch input:checked ~ label { /* Button */
        background: #d2cbc3;
        box-shadow:
            inset 0 1px 0 white,
            0 0 0 1px #999,
            0 0 5px 1px rgba(0,0,0,0.2),
            inset 0 -10px 0 #aaa,
            0 2px 0 rgba(255,255,255,0.1),
            inset 0 45px 3px #e0e0E0,
            0 8px 6px rgba(0,0,0,0.18);
    }
    
    

    例子3(Example 3)

    Let’s get on with something even cooler. This one is adapted from a lovely design by talented Piotr Kwiatkowski. It looks so smooth, doesn’t it?

    让我们继续做一些更酷的事情。 这是根据才华横溢的Piotr Kwiatkowski的可爱设计改编而成。 看起来很光滑,不是吗?

    标记 (The Markup)

    For this switch, we will need an extra element. Let’s pick something quiet and discrete, like an <i>.

    对于此开关,我们将需要一个额外的元素。 让我们选择一个安静且离散的东西,例如<i>。

    
    <div class="switch">
    	<input type="checkbox">
    	<label><i></i></label>
    </div> 
    
    

    CSS(The CSS)

    So once again, we hide the checkbox, with the same little snippet of CSS. And, as always, we give a size to the container.

    因此,我们再次隐藏具有相同CSS小片段的复选框。 而且,和往常一样,我们给容器一个尺寸。

    
    .switch {
        width: 180px;
        height: 50px;
        position: relative;
    }
    
    

    So here we are going to do the following: the label will be the container of the toggle switch. The <i> tag will be the actual toggle element. So the label is only the dark grey background with shadows, nothing more. Pseudo-elements will do the rest.

    因此,在这里我们将执行以下操作:标签将是拨动开关的容器。 <i>标签将是实际的切换元素。 因此,标签只是带有阴影的深灰色背景,仅此而已。 伪元素将完成其余的工作。

    
    .switch label {
        display: block;
        width: 100%;
        height: 100%;
        position: relative;
        background: #a5a39d;
        border-radius: 40px;
        box-shadow:
            inset 0 3px 8px 1px rgba(0,0,0,0.2),
            0 1px 0 rgba(255,255,255,0.5);
    }
    
    

    This is the “frame of the container”, so we give it a nice gradient, and some sweet box-shadows.

    这是“容器的框架”,因此我们给它提供了一个不错的渐变以及一些甜美的盒子阴影。

    
    .switch label:after {
        content: "";
        position: absolute;
        z-index: -1;
        top: -8px; right: -8px; bottom: -8px; left: -8px;
        border-radius: inherit;
        background: #ccc; /* Fallback */
        background: linear-gradient(#f2f2f2, #ababab);
        box-shadow: 0 0 10px rgba(0,0,0,0.3),
            0 1px 1px rgba(0,0,0,0.25);
    }
    
    

    This pseudo-element is meant to create a soft hollow around the button, so as usual, we’ll use gradient and shadows. A little enhancement for Chrome with the use of a blur filter to make the effect even softer.

    该伪元素旨在在按钮周围创建一个柔软的空心,因此,像往常一样,我们将使用渐变和阴影。 使用模糊滤镜使Chrome略有增强,使效果更加柔和。

    
    .switch label:before {
        content: "";
        position: absolute;
        z-index: -1;
        top: -18px; right: -18px; bottom: -18px; left: -18px;
        border-radius: inherit;
        background: #eee; /* Fallback */
        background: linear-gradient(#e5e7e6, #eee);
        box-shadow: 0 1px 0 rgba(255,255,255,0.5);
        -webkit-filter: blur(1px); /* Smooth trick */
        filter: blur(1px); /* Future-proof */
    }
    
    

    So now, we have a really beautiful frame for our toggle switch. Let’s take care of the switch, shall we?

    所以现在,我们的拨动开关有了一个非常漂亮的框架。 让我们照顾一下开关,好吗?

    We turn it into a block element, give it the height of its parent and a little bit more than half of its width. We place it on the left of the container, and give it some nice styles (shadows and gradients, you get it):

    我们将其变成一个块元素,为其指定其父对象的高度,并为其宽度的一半多一点。 我们将其放置在容器的左侧,并为其提供一些漂亮的样式(阴影和渐变,就可以了):

    
    .switch label i {
        display: block;
        height: 100%;
        width: 60%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 2;
        border-radius: inherit;
        background: #b2ac9e; /* Fallback */
        background: linear-gradient(#f7f2f6, #b2ac9e);
        box-shadow:
            inset 0 1px 0 white,
            0 0 8px rgba(0,0,0,0.3),
            0 5px 5px rgba(0,0,0,0.2);
    }
    
    

    This first pseudo-element is used to enhance the aesthetics: it adds a curved effect to the toggle. We place it in the middle, and gave it a gradient from top to bottom, almost the same as the one of its parent but reverted.

    第一个伪元素用于增强美观性:它为肘节添加了弯曲效果。 我们将其放置在中间,并给它一个从上到下的渐变,与它的父级几乎相同,但恢复原状。

    
    .switch label i:after {
        content: "";
        position: absolute;
        left: 15%;
        top: 25%;
        width: 70%;
        height: 50%;
        background: #d2cbc3; /* Fallback */
        background: linear-gradient(#cbc7bc, #d2cbc3);
        border-radius: inherit;
    }
    
    

    The second pseudo-element is the word “ON” or “OFF”, depending on the state of the button. We use the content property to set the right word, and some font styles to make it look like it’s engraved in the background:

    第二个伪元素是单词“ ON”或“ OFF”,具体取决于按钮的状态。 我们使用content属性设置正确的单词,并使用一些字体样式使其看起来像刻在背景中:

    
    .switch label i:before {
        content: "off";
        position: absolute;
        top: 50%;
        right: -50%;
        margin-top: -12px;
        color: #666; /* Fallback */
        color: rgba(0,0,0,0.4);
        font-style: normal;
        font-weight: bold;
        font-family: Helvetica, Arial, sans-serif;
        font-size: 24px;
        text-transform: uppercase;
        text-shadow: 0 1px 0 #bcb8ae, 0 -1px 0 #97958e;
    }
    
    

    So now we have a toggle switch which looks like the one from Piotr, right? Let’s get into the checked state. Three things are changing when we click on the checkbox: the background color, the toggle’s position, and the word (“ON” or “OFF”):

    所以现在我们有了一个拨动开关,看起来像是Piotr的那样,对吗? 让我们进入检查状态。 单击复选框时,三件事正在发生变化:背景颜色,切换开关的位置和单词(“ ON”或“ OFF”):

    
    .switch input:checked ~ label { /* Background */
        background: #9abb82;
    }
    
    .switch input:checked ~ label i { /* Toggle */
        left: auto;
        right: -1%;
    }
    
    .switch input:checked ~ label i:before { /* On/off */
        content: "on";
        right: 115%;
        color: #82a06a;
        text-shadow: 0 1px 0 #afcb9b, 0 -1px 0 #6b8659;
    }
    
    

    例子4(Example 4)

    Our last example is based on another work from Piotr Kwiatkowski, but slightly edited by myself in order to have the same color theme as the others.

    我们的最后一个示例基于Piotr Kwiatkowski的另一作品,但我自己对其进行了少许编辑,以使其与其他主题具有相同的颜色主题。

    Let’s do something really amazing on this one, with an icon font and transitions!

    让我们通过图标字体和过渡功能在这一方面做些非常了不起的事情!

    标记 (The Markup)

    The markup will be pretty much the same as in the third example. The class on the <i> tag is required in order to make FontAwesome work.

    标记将与第三个示例中的几乎相同。 <i>标记上的类是使FontAwesome起作用所必需的。

    
    <div class="switch">
        <input type="checkbox">
        <label><i class="icon-off"></i></label>
    </div> 
    
    

    CSS(The CSS)

    I won’t cover here all the FontAwesome stuff because I’m pretty sure it has already been covered in another article, plus probably all of you have already done that before. Just make sure that

    我不会在这里介绍所有FontAwesome东西,因为我很确定它已经在另一篇文章中介绍了,而且也许你们所有人以前都已经做过。 只要确保

    • your @font-face stuff indicate the correct paths to the files,

      您的@ font-face内容指示文件的正确路径,
    • one of your CSS files includes FontAwesome related styles.

      您CSS文件之一包含FontAwesome相关样式。

    So let’s start with the basics: checkbox hiding and container sizing:

    因此,让我们从基础开始:复选框隐藏和容器大小调整:

    
    .switch {
        width: 150px;
        height: 150px;
        position: relative;
    }
    
    

    Now, let’s take care of the label which is basically our big old button. Note that we include a few font style here. Since all of them are inherited, they will go straight to the <i> element (icon). So nothing new, a sweet gradient and some box-shadows for a beautiful effect:

    现在,让我们来照顾标签,它基本上是我们的旧按钮​​。 请注意,此处包含一些字体样式。 由于它们都是继承的,因此它们将直接进入<i>元素(图标)。 因此,没有什么新鲜的东西了,甜美的渐变色和一些盒子阴影带来了美丽的效果:

    
    .switch label {
        display: block;
        width: 100%;
        height: 100%;
        position: relative;
        color: #a5a39d;
        font-size: 70px;
        text-align: center;
        line-height: 115px;
        text-shadow: 0 2px 1px rgba(0,0,0,0.25);
        border-radius: 50%;
        background: #b25244; /* Fallback */
        background: linear-gradient(#f7f2f6, #b2ac9e);
        transition: all 0.3s ease-out;
        z-index: -1;
        box-shadow:
            inset 0 2px 3px rgba(255,255,255,0.13),
            0 5px 8px rgba(0,0,0,0.3),
            0 10px 10px 4px rgba(0,0,0,0.3);
    }
    
    

    Now, both label pseudo-elements are used to make the material effect around the button. We apply the blur filter to the closest one to make it a bit more subtle.

    现在,两个标签伪元素都用于在按钮周围产生实物效果。 我们将模糊滤镜应用于最接近的滤镜,以使其更加微妙。

    
    .switch label:before {
        content: ""; 
        position: absolute;
        left: -10px;
        right: -10px;
        top: -10px;
        bottom: -10px;
        z-index: -1;
        border-radius: inherit;
        box-shadow: inset 0 10px 10px rgba(0,0,0,0.13); 
        -webkit-filter:blur(1px); /* Smooth trick */
        filter: blur(1px); /* Future-proof */
    }
    
    .switch label:after {
        content: ""; 
        position: absolute;
        left: -20px;
        right: -20px;
        top: -20px;
        bottom: -20px;
        z-index: -2;
        border-radius: inherit;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.1),
            0 1px 2px rgba(0,0,0,0.3),
            0 0 10px rgba(0,0,0,0.15);
    }
    
    

    Okay, let’s deal with our extra element: <i>. FontAwesome uses the :before pseudo-element to show the icon, so we can’t use it. But, we can use the :after one, and we will because we need something to make the upper part of our button. As usual, we give it a nice gradient, some subtle shadows, and a 1px blur to make it smoother.

    好的,让我们处理一下额外的元素:<i>。 FontAwesome使用:before伪元素显示图标,因此我们不能使用它。 但是,我们可以使用:after,然后我们将因为需要一些东西来制作按钮的上部。 和往常一样,我们给它一个不错的渐变,一些细微的阴影以及1px的模糊以使其更平滑。

    
    .switch .icon-off:after {
        content: "";
        display: block;
        position: absolute;
        width: 70%;
        height: 70%;
        left: 50%;
        top: 50%;
        z-index: -1;
        margin: -35% 0 0 -35%;
        border-radius: 50%;
        background: #d2cbc3; /* Fallback */
        background: linear-gradient(#cbc7bc, #d2cbc3);
        box-shadow:
            0 -2px 5px rgba(255,255,255,0.05),
            0 2px 5px rgba(255,255,255,0.1);
        -webkit-filter:blur(1px); /* Smooth trick */
        filter: blur(1px); /* Future-proof */
    }
    
    

    And now, the checked state; pretty simple: the icon turns green, and the button looks pressed:

    现在,检查状态; 非常简单:图标变为绿色,并且按钮看上去已按下:

    
    .switch input:checked ~ label { /* Button */
        color: #9abb82;
        box-shadow:
            inset 0 2px 3px rgba(255,255,255,0.13),
            0 5px 8px rgba(0,0,0,0.35),
            0 3px 10px 4px rgba(0,0,0,0.2);
    } 
    
    

    最后的话(Final words)

    So finally, what do we need to make beautiful buttons with pure CSS? Mostly shadows! But subtle gradients and rounded corners help a lot, too. To turn a simple button into a button switch, we just need one more thing: a checkbox.

    那么,最后,我们需要用纯CSS制作漂亮的按钮吗? 主要是阴影! 但是细微的渐变和圆角也有很大帮助。 要将简单的按钮变成按钮开关,我们只需要再做一件事:一个复选框。

    Please, keep in mind that this kind of stuff is pretty tricky, so not every browser will display it correctly. But, you can make the whole thing fall back to a simple checkbox very easily by using a filtering selector, for example:

    请记住,这种东西非常棘手,因此并不是每个浏览器都能正确显示它。 但是,通过使用过滤选择器,您可以使整个事情很容易地回到一个简单的复选框,例如:

    
       .switch:not(:checked) label {
            /* Styles for label go here... */
        }
    
        .switch:not(:checked) input {
            /* Styles for input go here... */
        }
    
    

    In this case, :not(:checked) is a filter so that browsers that don’t support :checked don’t follow these rules. Check out this article by Lea Verou to find out more about this technique: Accessible star rating widget with pure CSS

    在这种情况下,:not(:checked)是一个过滤器,因此不支持:checked的浏览器不会遵循这些规则。 查看Lea Verou的这篇文章,以了解有关此技术的更多信息:具有纯CSS的可访问星级评分小部件

    Anyway, with a little more time, we can make beautiful things like these:

    无论如何,只要多一点时间,我们就可以制作出如下漂亮的东西:

    Thank you for reading this tutorial, and if you have any question or related work to show, please do. 🙂

    感谢您阅读本教程,如果您有任何疑问或需要展示的相关工作,请这样做。 🙂

    翻译自: https://tympanus.net/codrops/2012/09/13/button-switches-with-checkboxes-and-css3-fanciness/

    css 按钮隐藏复选框

    展开全文
  • css按钮渐变色

    2014-10-24 09:45:00
    CSS3渐变色按钮 转自:http://www.cinner.name/article/6.aspx  CSS3渐变特性的应用。可以去看一组按钮,我只用了 CSS创建完成的渐变按钮(不需要图片和Javascript)。 这些按钮可以根据字体的大小伸缩。当填充...
  • 8.Bootstrap CSS 按钮

    2019-11-18 18:26:26
    小编整理的Bootstrap笔记希望对你有用,由于编译...3.1 激活状态 3.2 禁用状态 四:按钮标签 五:按钮组 5.1 在 div 中直接使用 .btn-group 可以创建按钮组: 5.2 使用 .btn-group-lg|sm|xs 来控制按钮组的大小: 5....
  • 1. :hover伪类在触屏上表现不完美,在Android的WebView中,WebKit会处理touch事件和mouse事件,当手指停留在按钮上,hover状态的确被触发,但是当手指保持接触屏幕并离开按钮,hover状态依然保留。所以需要借助:...
  • ?我们用 A 包含一个 SPAN ...设置按钮样式:CSS:? a.button {???? background: transparent url(‘bg_button_a.gif’) no-repeat scroll top right;???? color: #444;???? display: block;???? float: left;???? fon...
  • CSS设计按钮

    2018-08-22 19:25:28
    完全兼容不支持css3的浏览器,若不兼容css3,则显示没有渐变和阴影的普通按钮。 &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &...
  • 我试图区分一个按钮,以便客户端可以看到...我在我的CSS中定义了button和button1,如下所示:.button{font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 12px;font-weight: bold;color: #003366}.button...
  • jQ跟CSS3鼠标点击按钮加载特效是一款jQuery基于css3属性制作表单提交激活按钮,文字加载动画过程特效。
  • VUE按钮激活事件

    千次阅读 2017-06-22 13:27:00
    首先先来看一下 按钮的三种触发方式 1. 鼠标移入 v-on:mouseenter=“dataDetails" 2.鼠标移动出来 v-on:mouseleave=“hiddenDetail" 3 .点击事件 v-on:click=“hiddenDetail” html中的写法 <div :class...
  • jQ跟CSS3鼠标点击按钮加载特效是一款jQuery基于css3属性制作表单提交激活按钮,文字加载动画过程特效。
  • //勾选了同意服务协议才激活按钮 Itxt.className="btn1"; } else { Itxt.disabled=true; Itxt.className="btn0"; } } // --> <mce:style type="text/css"><!-- #btn1{width:51px; height:21px; ...
  • 使用纯 CSS 设计3D按钮

    2007-05-17 20:15:00
    使用纯 CSS 设计3D按钮 ...而且,你不需要任何 javas cript 来交换图像以实现翻卷效果,因为 CSS 伪类(pseudoclass)能够让你为链接的每个状态(链接、已访问、悬停、激活)建立独立的样式。 纯 CSS 按钮唯一的问题是
  • 1.输入框激活的边框样式 input:focus { border: 1px solid #ddd; outline: none; }
  • CSS3渐变色按钮

    2015-04-01 09:12:12
    可以去看一组按钮,我只用了 CSS创建完成的渐变按钮(不需要图片和Javascript)。 这些按钮可以根据字体的大小伸缩。当填充和字体大小发生变化时,这些按钮的大小可以容易地适应。 这种方法最好的部分就是能被应用于...
  • Bootstrap CSS -6:按钮

    2020-05-03 14:42:13
    Bootstrap 提供了激活、禁用等按钮状态的 class,下面将进行详细讲解。 激活状态 按钮激活时将呈现为被按压的外观(深色的背景、深色的边框、阴影)。 下表列出了让按钮元素和锚元素呈激活状态的 class: 按钮元素...
  • 按钮 为 <a>、<button> 或 <input> 元素添加按钮类(button class)即可使用 Bootstrap 提供的样式。 <a class="btn btn-default" href="#" role="button">Link</a> <button ...
  • jQ跟CSS3鼠标点击按钮加载特效是一款jQuery基于css3属性制作表单提交激活按钮,文字加载动画过程特效。
  • CSS3打造精美按钮

    千次阅读 多人点赞 2013-05-13 22:32:42
    实现两种风格的按钮,主要利用box-shadow阴影实现3d风格的按钮,同时利用css的counter实现计数。 html结构非常简单,详细代码如下。 Number One Number Two Number Three Number Four Nu
  • CSS3渐变色按钮

    2013-03-28 13:54:53
    ...可以去看一组按钮,我只用了 CSS创建完成的渐变按钮(不需要图片和Javascript)。 这些按钮可以根据字体的大小伸缩。当填充和字体大小发生变化时,这些按钮的大小可以容易地适应。 这种方...
  • 按钮样式 .btn 按钮基类 ....btn-{primary |secondary |success |info |warining |danger |dark |light | link } ...按钮激活状态样式 .disabled 按钮禁用状态样式 .btn-outline-{p...

空空如也

空空如也

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

css按钮激活