div+css实现立体质感电话拨号按钮点击效果代码-html代码-BFW代码库

div+css实现立体质感电话拨号按钮点击效果代码

代码语言：html

代码描述：div+css实现立体质感电话拨号按钮点击效果代码

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

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
    @import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,500;1,300&display=swap');

:root {
	--c1: #202020;
	--c2: #3a3a3a;
	--c3: #4b4b4b;
	--c4: #dddddd;
}

::selection {
  background-color: #fff0;
}

*,
*:before,
*:after {
	box-sizing: border-box;
	font-family: 'Roboto Condensed', sans-serif;
}


body {
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: radial-gradient(#525252, #0c0c0c);
}

body:before, 
body:after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background: repeating-conic-gradient(#0003 0.000095%, #fff0 .0005%, #fff0 .005%, #fff0 .0005%), repeating-conic-gradient(#0003 0.00001%, #fff0 .00009%, #fff0 .0007.........完整代码请登录后点击上方下载按钮下载查看