CSS3漢堡按鈕是一種常用于網頁導航欄的元素。它的設計初衷是為了讓移動端設備的用戶能夠更方便地操作網頁。下面是一個簡單的CSS3漢堡按鈕源碼示例：

<div class="hamburger">  <span class="line"></span>  <span class="line"></span>  <span class="line"></span></div>

上面的代碼中，我們使用了兩個HTML標簽：div和span。其中，div用于定義CSS3漢堡按鈕的主容器，而span則用于定義按鈕中的三條橫線。

下面是CSS的部分代碼：

.hamburger {  cursor: pointer;  display: inline-block;  height: 20px;  position: relative;  width: 30px;}.line {  background-color: #333;  display: block;  height: 2px;  margin: 5px auto;  transition: all 0.3s ease-in-out;  width: 100%;}

在上面的代碼中，我們為CSS3漢堡按鈕定義了兩個類：hamburger和line。其中，hamburger類用于定義按鈕的大小、位置等屬性，而line類則用于定義三條橫線的樣式和動態效果。

最后，我們還需要使用JavaScript代碼來為CSS3漢堡按鈕添加點擊事件，以實現按鈕展開和收起的功能：

var hamburger = document.querySelector(".hamburger");var lines = document.querySelectorAll(".line");hamburger.addEventListener("click", function() {  for(var i=0; i<lines.length; i++) {    if(lines[i].classList.contains("open")) {      lines[i].classList.remove("open");    } else {      lines[i].classList.add("open");    }  }});

在上面的代碼中，我們使用了querySelector和querySelectorAll兩個方法來獲取CSS3漢堡按鈕和三條橫線的HTML元素。然后，在按鈕上添加了一個click事件，當用戶點擊按鈕時，就會切換三條橫線的open類。當open類存在時，三條橫線將展開，否則就會收起。

以上就是一個簡單的CSS3漢堡按鈕源碼示例。通過這個示例，我們可以學到如何使用HTML、CSS和JavaScript來創建一個實用的網頁導航欄中的元素。