⚠ī¸ Warning ⚠ī¸ Deprecated Code! This video tutorial contains outdated code.
💡 If you wish to update it, any AI assistant will update the code for you in seconds.

Control Panel Icon Menu Configure Button Design Tutorial

Published : November 17, 2014   •   Last Edited : November 24, 2025   •   Author : Adam Khoury
Learn to use CSS alone to design control panel menu interfaces or configuration screen interfaces. This is in preparation of our next video tutorial for JavaScript and CSS programming fly out control panel windows in an animated fashion. 
<style>
#cpBtn{
	float: left;
	width: 20px;
	height: 24px;
	background: linear-gradient(#FFF,#DDD);
	border: #AAA 1px solid;
	border-radius: 2px;
	padding: 2px 5px;
	cursor: pointer;
}
#cpBtn > div{
	width: 20px;
	height: 4px;
	background: #333;
	margin: 3px 0px;
	border-radius: 4px;
}
</style>
<div id="cpBtn">
  <div></div>
  <div></div>
  <div></div>
</div>
▲