Control Panel Icon Menu Configure Button Design Tutorial
Published : November 17, 2014Last 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>