※ 微互動範例：
1.建立btns_example專案：
2.建立HTML結構：index.html
<body>
<div class="section section1"></div>
<div class="section section2"></div>
<div class="section section3"></div>
</body>
3.建立section共同樣式：style.css
.section{
height: 600px;
border: 1px solid #000;
}
.section1 {
background-color: #42a1f4;
}
.section2 {
background-color: #333;
}
.section3 {
background-color: #ddd;
}
成果顯示：
4.建立box結構：index.html
<body>
<div class="section section1">
<div class="box"></div>
</div>
</body>
5.建立box樣式：style.css
.box {
width: 100px;
height: 100px;
background-color: #ffff;
/* 絕對定位 */
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
/* 設定按鈕圓角 */
border-radius: 50%;
/* Transition 用來看到軌跡變化*/
/* transition: width 5s, height 2s, border-radius 2s; */
transition: all 0.5s;
}
成果顯示：
6.當滑鼠移入藍色區域時，圓球變成長方形：style.css
.section1:hover .box {說明：當使用者將滑鼠懸停在
/* 蓋滿上一層的寬高 */
width: 100%;
height: 100%;
/* 歸零的設定， 回到「無圓角」的狀態*/
border-radius: 0;
}
.section1 元素上時，選取其內部的 .box 元素並套用指定的樣式。成果顯示：
7.建立按鈕：index.html
<body>
<!-- Button 1 -->
<div class="section section2">
<a href="#!" class="btn1">BUTTON</a>
</div>
<!-- Button 2 -->
<div class="section section3"></div>
</body>
說明：
href="#!"是一個不會導致頁面跳轉的特殊寫法，通常用來保留連結樣式但不執行跳轉。
8.建立按鈕樣式：style.css
.btn1 {
display: inline-block;
background-color: #39e586;
/* 做按鈕的方法 */
padding: 0px 24px;
line-height: 48px;
/* 文字調整 */
color: #fff;
font-size: 18px;
/* 文字裝飾 */
text-decoration: none;
/* 字體 */
font-family: '微軟正黑體';
/* 粗細 */
font-weight: 800;
/* 圓角設計 */
border-radius: 4px;
}
成果顯示：
9.按鈕定位：index.html
<div class="section section2">
<!-- 幫按鈕加外框幫助定位 ，不用動到position設定-->
<div class="inner">
<a href="#!" class="btn1">BUTTON</a>
</div>
</div>
10.按鈕定位樣式：style.css
/* Button 1 */
.inner {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
成果顯示：
11.按鈕微互動設定：style.css
btn1：
.btn1 {
/* 按鈕微互動設定 */
border-bottom: 0px solid #279e5c;
/* 做0.2秒的變化時間 */
transition: all 0.2s;
}
/* hover樣式 */
.btn1:hover {
border-bottom: 8px solid #279e5c;
transform: translate(0, -8px);
}/* 點擊 */
.btn1:active {
transform: translate(0, 0);
border-bottom: 0px solid #279e5c;
background-color: #279e5c;
transition: all 0.05s;
}
成果顯示：
btn2：index.html
<!-- Button 2 -->
<div class="section section3">
<a href="#!" class="btn2">This is a link</a>
</div>
btn2：style.css
.btn2 {
/* 字體外觀 */
/* border: 1px solid #000; */
display: inline-block;
/* 底線消失 */
text-decoration: none;
/* 文字變化 */
font-size: 32px;
line-height: 80px;
color: #000;
font-family: '微軟正黑體';
/* 位置指中 */
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
/* 針對所有屬性做時間變化 */
transition: all 0.3s;
}
/* btn2:hover樣式變化 */
.btn2:hover {
color: #ff0061;
}
/* 用偽類選擇器畫線 */
.btn2:before {
/* 宣告是一個偽類選擇器 */
content: '';
/* block佔滿整行 */
display: block;
width: 0;
height: 5px;
background-color: #ff0061;
/* 定位 */
position: absolute;
left: 0;
top: 0;
transition: all 0.3s;
}
.btn2:after {
/* 宣告是一個偽類選擇器 */
content: '';
/* block佔滿整行 */
display: block;
width: 0;
height: 5px;
background-color: #ff0061;
/* 定位 */
position: absolute;
right: 0;
bottom: 0;
transition: all 0.3s;
}
.btn2:hover:before,
.btn2:hover:after {
width: 100%;
}
成果顯示：
