CSS关闭按钮图标（X）
关闭图标不用小图片，只用CSS，就能轻松实现。本文将给大家介绍如何用CSS来实现一个关闭按钮图标（X），代码其实非常简单。
CSS关闭按钮图标（X）
实例介绍
关闭按钮图标（X）位于区域右上角。
使用了一个鼠标悬停效果，默认颜色透明度为0.3，当鼠标移上去后，透明度为1。
完整HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Pure CSS Cross/Close Icon, </title>
<style>
.close {
opacity: 0.3;
}
.close:hover {
opacity: 1;
}
.close:before, .close:after {
float: right;
position: relative;
right: 20px;
top: 5px;
content: ' ';
height: 20px;
width: 1px;
background-color: #333;
}
.close:before {
transform: rotate(45deg);
}
.close:after {
transform: rotate(-45deg);
}
.container {
width: 500px;
height: 200px;
margin:30px 20px;
background-color: #f1f1f1;
}
</style>
</head>
<body translate="no" >
<div class="container">
<a href="#" class="close">
</div>
</body>
</html>
execcodegetcode
代码解释
按钮颜色、大小、位置均可通过CSS修改，非常方便。
.close:before, .close:after {
float: right;
position: relative;
right: 20px;
top: 5px;
content: ' ';
height: 20px;
width: 1px;
background-color: #333;
}
HTML中，class="container" 的 div 是关闭按钮（X）的相对区域。
实例中并无加入点击按钮的事件，实例主要给大家呈现如何用纯CSS来实现一个关闭按钮图标（X）。
您可能对以下文章也感兴趣
- 使用box-shadow实现的7个按钮悬停效果
- 30个漂亮的CSS渐变按钮，鼠标滑过(hover)动画效果
- CSS3实现渐变/立体/扁平的漂亮按钮
- 漂亮的纯CSS3开关按钮 (UISwitch)
- 【8个实例】纯CSS按钮(button)，简单漂亮实用
- CSS悬停效果按钮一简单实例（鼠标移到按钮上变成其他颜色）
- 很好看的css3动画按钮鼠标悬停效果【2个实例】
- 漂亮悬停效果的CSS3动画按钮【5个实例代码】
- 漂亮的伪元素CSS按钮5个实例代码
- 20个纯CSS3实现的彩色透明水晶按钮
