pushkin-/button.css Secret

## button.css
button {
    -webkit-app-region: no-drag;
}

button:hover {
    background: red;
}

body {
    -webkit-app-region: no-drag;
    background-color: transparent;
}

## button.html
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="./button.css"/>
  </head>
  <body>
    <button onClick="alert('I was clicked');">Click Me!</button>
  </body>
</html>

## index.css
.topBar {
    background-color: black;
    width: 100%;
    min-height: 40px;
    -webkit-app-region: drag;
}

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>Hello World!</title>
    <link rel="stylesheet" href="./index.css"/>
  </head>
  <body>
    <div class="topBar"></div>
    <h1>Hello World!</h1>
    We are using Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
    and Electron <span id="electron-version"></span>.

    <!-- You can also require other files to run in this process -->
    <script src="./renderer.js"></script>
  </body>
</html>

## main.js
const {app, BrowserWindow, BrowserView} = require('electron')

function createWindow () {
  const mainWindow = new BrowserWindow({ frame: false })

  mainWindow.loadFile('index.html')

  const browserView = new BrowserView();
  browserView.webContents.loadFile('button.html');
  mainWindow.addBrowserView(browserView);
  browserView.setBounds({x: 8, y: 8, width: 200, height: 40});
}

app.whenReady().then(createWindow);

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

## package.json
{
  "name": "eager-tension-promote-zhblq",
  "productName": "eager-tension-promote-zhblq",
  "description": "My Electron application description",
  "keywords": [],
  "main": "./main.js",
  "version": "1.0.0",
  "author": "ishats",
  "scripts": {
    "start": "electron ."
  },
  "dependencies": {},
  "devDependencies": {
    "electron": "25.4.0"
  }
}
	button {
	-webkit-app-region: no-drag;
	}

	button:hover {
	background: red;
	}

	body {
	-webkit-app-region: no-drag;
	background-color: transparent;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<link rel="stylesheet" href="./button.css"/>
	</head>
	<body>
	<button onClick="alert('I was clicked');">Click Me!</button>
	</body>
	</html>
	.topBar {
	background-color: black;
	width: 100%;
	min-height: 40px;
	-webkit-app-region: drag;
	}
	const {app, BrowserWindow, BrowserView} = require('electron')

	function createWindow () {
	const mainWindow = new BrowserWindow({ frame: false })

	mainWindow.loadFile('index.html')

	const browserView = new BrowserView();
	browserView.webContents.loadFile('button.html');
	mainWindow.addBrowserView(browserView);
	browserView.setBounds({x: 8, y: 8, width: 200, height: 40});
	}

	app.whenReady().then(createWindow);

	app.on('window-all-closed', function () {
	if (process.platform !== 'darwin') app.quit()
	})
	{
	"name": "eager-tension-promote-zhblq",
	"productName": "eager-tension-promote-zhblq",
	"description": "My Electron application description",
	"keywords": [],
	"main": "./main.js",
	"version": "1.0.0",
	"author": "ishats",
	"scripts": {
	"start": "electron ."
	},
	"dependencies": {},
	"devDependencies": {
	"electron": "25.4.0"
	}
	}