css简约立体按钮播放相关按钮效果代码-html代码-BFW代码库

css简约立体按钮播放相关按钮效果代码

代码语言：html

代码描述：css简约立体按钮播放相关按钮效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
        button {
	position:relative;
	display:inline-block;
	background:0;
	outline:0;
	border:0;
	padding:0;
	cursor:pointer;
	color:#eee;
	text-transform:uppercase;
	font-weight:700;
	letter-spacing:.05em
}
button span {
	position:relative;
	z-index:1;
	display:block;
	min-width:1em;
	padding:1em;
	border-radius:2em;
	background-color:#d99d61;
	border:1px solid #d4904c;
	box-shadow:-5px 5px 10px rgba(0,0,0,0.2);
	transition:transform .1s,box-shadow .2s,background-color .2s
}
button::after {
	content:"";
	position:absolute;
	top:-1em;
	bottom:-1em;
	left:-1em;
	right:-1em;
	border-radius:4em;
	box-shadow:0 0 0 rgba(0,0,0,0.2),inset 0 0 0 rgba(0,0,0,0.2);
	transition:box-shadow .1s
}
button:hover span,button:focus span {
	background-color:#dca56d
}
button:active span {
	background-color:#d99d61;
	transform:scale(0.97);
	box.........完整代码请登录后点击上方下载按钮下载查看