【前端开发】【css样式库】【Button-2】flash

最新推荐文章于 2024-08-16 09:06:44 发布

馒头拿来摸摸

最新推荐文章于 2024-08-16 09:06:44 发布

阅读量160

点赞数

分类专栏： OCDeer.css样式库文章标签：前端 html5 css3

本文链接：https://blog.csdn.net/m0_49908639/article/details/117320126

版权

OCDeer.css样式库专栏收录该内容

3 篇文章 0 订阅

订阅专栏

OCDeer.css是一个强大的样式库，专为前端开发者设计，简化了界面设计过程，允许快速导入并使用动态css样式。库中的所有样式均为动态特效，包括Button-2组件。推荐通过在线demo查看实际效果，并提供了下载地址以便于在项目中直接应用。

摘要由CSDN通过智能技术生成

OCDeer.css样式库，提供从单个功能组件到全局的动态css样式，绕过复杂的调试步骤，直接在项目中导入样式库，无须浪费太多的精力在界面设计，以腾出更多时间去专注于页面逻辑和服务功能。
为了引用方便统一使用白色背景，具体使用中添加颜色效果更佳

样式库中所有样式都为动态特效，截图仅供查阅方便，实际样式建议查看在线demo
样式查看：https://www.ocdeer.cn/ocdeer/ocdeer/btn2.html
样式库下载地址：https://gitee.com/mtnlmm/ocdeer

单一类选择器，直接引用class=“btn-2”

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/button.css" />
    </head>
    <body>
        <button type="button" class="btn-2">BUTTON</button>	
    </body>
</html>

css代码

.btn-2 {
	border: 2px solid black;
	background: transparent;
	text-transform: uppercase;
	color: black;
	padding: 15px 50px;
	outline: none;
	overflow:hidden ;
	position: relative;
	z-index: 20;
}

.btn-2:after{
	content: "";
	display:block;
	position: absolute;
	top: -36px;
	left: -100px;
	background: black;
	width: 50px;
	height: 125px;
	opacity: 20%;
	transform: rotate(-45deg);
}
.btn-2:hover::after{
	left: 120%;
	transition: all 600ms cubic-bezier(0.3, 1, 0.2, 1);
	-webkit-transform: all 600ms cubic-bezier(0.3, 1, 0.2, 1);
}