Creating

You can right click on the task pane to refresh the page

Create the Solution

Open Visual Studio
File > New > Project
Templates > Visual C# > Office > Office Add-ins
Change the Project Name to My-Excel-Add-in
Select "Task Pane" for your add-in type
Select "Excel" as the only host application
SS - solution explorer
The first project contains your manifest file
The second project contains all the files that make up the actual add-in

Editing the Manifest

Double click on the first project to show the Manifest Designer.

Checking the Properties

The [[Properties Window]] also displays important information.

Loading the Task Pane

You can launch the add-in in several ways:
Debug > Start Debugging, Pressing Start on the toolbar or pressing F5
You can stop debugging in several ways:
Debug > Stop Debugging or Pressing Stop on the toolbar

Removing the Existing Style

Remove the Content and Images folders

Home.html
Remove the reference to /Content/Office.css
Remove everything inside the body tags
The file should contain:
SS - whats left

Home.js
Remove the getDataFromSelection function
Remove the call to app.initialize
The file should contain:
SS - whats left

App.css
Remove everything to leave an empty file
Add the following css styles

code 

Home.html
Add the following HTML inside the body tags

<button id="my-unique-name" class="ms-Button"> 
   <span class="ms-Button-Label">My Button Caption</span> 
</button> 

Home.js
Add the event handler for this button to the Office.initialize function

Office.initialize = function(reason) { 
   $(document).ready(function() { 
      $('#my-unique-name').click(event_onMyButtonClick);  
   }); 
} 

function event_onMyButtonClick() { 
   console.log('My Button just got clicked'); 
} 

Display the Javascript Console

Quick Launch, type Javascript console