div+css实现可上下左右点击的游戏机按钮点击效果代码-html代码-BFW代码库

div+css实现可上下左右点击的游戏机按钮点击效果代码

代码语言：html

所属分类：其他

代码描述：div+css实现可上下左右点击的游戏机按钮点击效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  
  
<style>
:root {
  --c1: #fff;
  --c2: #111;
	--c3: orangered;
}

html {
  font-size: 100%;
  block-size: 100%;
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

body {
	min-block-size: 100%;
  padding: 5vmin;
	display: grid;
	place-content: center;
  background-color: var(--c1);
}

button {
	--rot: 0deg;
	all: unset;
	font-size: 2rem;
	cursor: pointer;
	display: grid;
	place-content: center;
}

button::after {
	content: "";
	width: 1rem;
	height: 1rem;
	clip-path: polygon(50% 0%, 100% 100%, 0 100%);
	background-color: var(--c2);
	transform: rotate(var(--rot));
}

:is(button:active, button:focus-visible) {
	background-color: var(--c1);
}

:is(button:active, button:focus-visible)::after {
	background-color: var(--c3);
}

.controler {
	display: grid;
	grid-template-columns: repeat(3, 4rem);
	grid-template-rows: repeat(3, 4rem);
	background-color: var(--c1);
	clip-path: polygon(33% 0, 66% 0, 66% 33%, 100% 33%, 100% 66%, 66% 66%, 66% 100%, 33% 100%, 33% 6.........完整代码请登录后点击上方下载按钮下载查看