Control Panel Icon Menu Configure Button Design Tutorial
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>