使用CSS制作圓角按鈕

2024-01-15

1745

在本篇教程中，我們將學習如何使用Dreamweaver來制作一個帶有圓角和鼠標經過變色效果的按鈕。下面我將分享給大家一些經驗。新建HTML文件并插入鏈接首先，我們需要新建一個HTML文件，并在

在本篇教程中，我們將學習如何使用Dreamweaver來制作一個帶有圓角和鼠標經過變色效果的按鈕。下面我將分享給大家一些經驗。

新建HTML文件并插入鏈接

首先，我們需要新建一個HTML文件，并在body標簽中插入一個a標簽，并設置空鏈接。

lt;a class"btn-style" href"#"gt;開始游戲lt;/agt;

然后，在title標簽中引入內嵌樣式表的代碼。

lt;style type"text/css"gt;lt;/stylegt;

添加CSS樣式

接下來，我們給a標簽添加一個CSS樣式，并命名為btn-style。我們可以定義按鈕的寬度、高度、字體顏色、背景色以及去除下劃線等屬性。

.btn-style {
  width: 150px;
  height: 50px;
  color: #F8FF00;
  background: #FF0000;
  text-decoration: none;
  display: block;
}

注意，要加上display:block屬性，否則定義的寬度和高度將不會生效。

最后，在a標簽中引入btn-style樣式。

lt;a class"btn-style" href"#"gt;開始游戲lt;/agt;

進一步樣式設置

我們可以繼續添加樣式，使按鈕文字水平居中、垂直居中，并定義字體和字體大小。

.btn-style {
  width: 150px;
  height: 50px;
  color: #F8FF00;
  background: #FF0000;
  text-decoration: none;
  display: block;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
  font-family: "微軟雅黑";
}

添加圓角效果

我們可以將按鈕的四個角設置成圓角，使其更像一個按鈕。

.btn-style {
  width: 150px;
  height: 50px;
  color: #F8FF00;
  background: #FF0000;
  text-decoration: none;
  display: block;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
  font-family: "微軟雅黑";
  border-radius: 100px;
}

鼠標經過效果

為了使按鈕更加明顯，我們可以在鼠標經過時改變按鈕的顏色。我們可以單獨給a標簽定義鼠標經過后的顏色，將字體顏色從之前的黃色改為白色。

.btn-style:hover {
  color: #fff;
}

除了字體顏色，我們還可以改變按鈕的背景色。

.btn-style:hover {
  color: #fff;
  background: #B00000;
}

調試和實時預覽

為了方便觀察效果，我們可以復制一個完全相同的按鈕，并給兩個按鈕之間添加外邊距。保存網頁后，在瀏覽器中查看，當鼠標經過按鈕時，按鈕的顏色會改變，非常好看。

此外，在Dreamweaver中，我們還可以直接點擊頂部工具欄中間的"拆分"按鈕，以實時查看編輯后的效果。

以上就是使用Dreamweaver制作圓角按鈕的教程，是不是很簡單呢？希望對大家有所幫助！