CSS 关闭按钮实现

最新推荐文章于 2021-06-09 21:57:07 发布
最新推荐文章于 2021-06-09 21:57:07 发布
阅读量5.5k 收藏 6
点赞数 3
分类专栏： CSS

参考文献

css 关闭按钮实现


在参考文献的基础上进行改进

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
/*关闭图标*/
.close {
	position: relative;
	margin: 3px;
	width: 24px;
	height: 24px;
    background: white;
    cursor: pointer;
    box-sizing: border-box;
}
.close:hover::before, .close:hover::after { 
	background: red;
}
.close:before {
    position: absolute;
    content: '';
    width: 1px;
    height: 25px;
    background: #666666;
    transform: rotate(45deg);
    top: -3px;
    left: 11px;
}
.close:after{
    content: '';
    position: absolute;
    width: 1px;
    height: 25px;
    background: #666666;
    transform: rotate(-45deg);
    top: -3px;
    left: 11px;
}
</style>

<title>Insert title here</title>
</head>
<body>
	<div class="close"></div>
</body>
</html>
效果

鼠标不在它上面时

鼠标在它上面时

wangjingqiannihao
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用css3绘制关闭按钮
qq_44184794的博客
06-20 785
问题：绘制如下图所示的关闭按钮 思路： 1.用一个div作为按钮的容器； 2.使用伪元素before和after各绘制一条线； 设置伪元素的宽度和高度；都使用绝对定位，水平居中，垂直居中；before伪元素顺时针旋转45度；after伪元素逆时针旋转45度 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport"
CSS3:清除、关闭按钮绘制
meng_xiaoxiao的博客
05-20 378
关闭按钮 .close { position: relative; margin-top: 4px; width: 30px; height: 30px; cursor: pointer; &::before{ position: absolute; top: 5px; left: 14px; content: ""; display: block; height: 20px; width: 2px; .
使用CSS3绘制关闭以及箭头图标
weixin_33895016的博客
11-21 262
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title...
css关闭按钮样式
liona_koukou的博客
04-09 7817
效果图：录屏的时候忘了把鼠标录上，效果是鼠标移上放大变红透明度改变_(:3」∠)_懒得录第二遍了，只需要修改定位的right值和top值 代码：   &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;关闭按钮&am
CSS 实现关闭 icon
u011848617的专栏
02-23 2381
关闭 icon 有两条线组成，所以很简单的设想就是两条横线，分别旋转不同角度即可。 HTML <span id="close"></span> CSS #close { display: inline-block; width: 23px; height: 2px; background: red; transform: ...
css 实现关闭按钮 X
weixin_30302609的博客
05-24 1047
.close::before { 　　content: "\2716";} 然后就显示出来了 这里有个更直接的例子 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> ...
JS+CSS实现带关闭按钮DIV弹出窗口的方法
12-11
本文实例讲述了JS+CSS实现带关闭按钮DIV弹出窗口的方法。分享给大家供大家参考。具体实现方法如下： 代码如下:<html> <head> <title>JS+CSS实现带关闭按钮的DIV弹出窗口</title> [removed]...
纯CSS实现图片点击放大带关闭按钮的图片特效代码
01-23
今天我们将深入探讨如何使用纯CSS实现这样的图片点击放大带关闭按钮的图片特效。 首先，我们需要创建HTML结构。一个基本的布局可能包含一个容器div，里面有两个子元素：一个用于显示原始大小的图片，另一个是用于...
CSS实现放大缩小关闭按钮(实例代码)
01-21
如上图所示，使用CSS 绘制上述三个按钮： <button class=min>缩小</button> <button class=fullpage>放大</button> <button class=close>关闭</button> [removed] ...
CSS3实现的多组关闭按钮点击动画特效特效代码
03-20
CSS3实现的多组关闭按钮点击动画特效源码是一段实现了13种关闭按钮点击动画效果，本段代码适应于所有网页使用，有需要的朋友们可以前来下载使用。本段代码兼容目前最新的各类主流浏览器，是一款非常优秀的特效源码。
纯css实现按钮开关效果
05-15
纯CSS实现的按钮开关效果，无需依赖JavaScript或其他编程语言，仅通过CSS样式就能达到这样的功能。这种方式不仅简化了代码，也提高了页面加载速度。下面将详细讲解如何使用CSS结合checkbox复选框来实现这种效果。 ...
1.CSS图像绘制之：关闭按钮
MJ的博客
02-12 2126
一、HTML Close Me 二、CSS /*使页面背景显示为绿色*/ body {    background:#2ECC71;    margin:50px; } .close{    font-size:0px;    display:block; } /*绘制上下2个白色长方形*/ .close::before, .close::after{    conten
退出图标html css 实现,用一个div画出关闭图标
weixin_39863008的博客
06-09 819
今天实现一个 用一个div来实现关闭按钮图标，其中主要用到的技巧：css3伪元素:before,:after,css3的transform:rotate(),同时让该图标居中，此次是用了flex弹性布局。css样式如下：html,body{width:100%;height:100%;overflow: hidden;display: flex;justify-content:center;ali...
html css禁用右键,HTML+CSS入门 禁用点击事件详解
weixin_29938119的博客
06-02 824
本篇教程介绍了HTML+CSS入门 禁用点击事件详解，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。<11.css禁用鼠标点击事件23.disabled{pointer-events:none;}4注：(这个没有试过)567jquery禁用a标签方法18$(document).ready(function(){9$...
HTML页面中点击按钮关闭页面几种方式与取消
热门推荐
xujing19920814的博客
01-15 9万+
HTML页面中如何按关闭按钮直接关闭页面 1、不带任何提示关闭窗口的js代码 2、自定义提示关闭 3、在即将离开当前页面(刷新或关闭)时 4、onload,onunload,onbeforeunload 5、删除或（卸载）window.onbeforeunload事件
jquery禁用、启用button以及button的样式操作
你好，我们在哪里见过啊！
06-06 7万+
我们在页面当中，经常需要跟button打交道，那么，就涉及到各种button的操作，在此写下来，供自己参考使用。一：禁止使用button1.直接写在&lt;button&gt;标签里面&lt;button id="btn" disabled="disabled"&gt;设置按钮不可以点击&lt;/button&gt;2.js禁用buttondocument.getElementById("btn"..
CSS实现禁用状态，样式设置以及不可点击事件的行为
**My Coding Family**
03-26 4万+
今天怂怂就为大家分享一篇通过css禁用状态，样式设置以及不可点击样式事件的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随怂怂过来看看吧 一：为input框添加禁用状态 1、readonly表示此域的值不可修改，仅可与 type="text" 配合使用，可复制，可选择,可以接收焦点，后台能接收到传值. 代码演示： <input type="text" name="fir...
jquery禁止点击事件，css禁止按钮
weixin_33895516的博客
03-16 3996
jquery禁止点击事件，css禁止按钮 $('.disabled').unbind('click'); cursor:not-allowed; 转载于:https://www.cnblogs.com/starwink/p/10542424.html
多个页面情况下，button 关闭当前页
weixin_30364147的博客
08-04 395
page_load 中写 Button1.Attributes.Add( "onclick ", "window.close(); ") 转载于:https://www.cnblogs.com/nightly/archive/2011/08/25/2153587.html
css 漂亮的关闭按钮
最新发布
10-18
可以使用伪元素来实现漂亮的关闭按钮，具体代码如下： ```css .close { position: relative; width: 20px; height: 20px; cursor: pointer; } .close::before, .close::after { content: ''; position: absolute; top: 50%; left: 50%; width: 2px; height: 16px; background-color: #000; } .close::before { transform: translate(-50%, -50%) rotate(45deg); } .close::after { transform: translate(-50%, -50%) rotate(-45deg); } ``` 这段代码会生成一个宽高为 20px 的关闭按钮，按钮中间有一条横线和一条竖线，看起来像是一个叉号。你可以根据需要调整按钮的大小和颜色。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值