button

by Fanny60714

HTML

<!DOCTYPE html>
<html>
<head>

</head>
<body>
  <div>
    <div id="form">
      姓名:<input id="name" type="text" value="Gina" /><br>
    </div>
    <button onclick="buy()" id="btn1">我要訂購</button>
    <button onclick="more()" id="btn2">認識工廠</button>
  </div>
</body>
</html>

CSS

#btn1 {
  background-color: #fcc428;
  border: 1px solid;
  border-radius: 15px;
  padding: 8px;
}

#btn1:hover {
  background-color: #ebbf44;
}

#btn2 {
  background-color: #9aedf5;
  border: 1px solid;
  border-radius: 15px;
  padding: 8px;
}

#btn2:hover {
  background-color: #86d2d9;
}

#form {
  margin: 10px 0px 10px 0px;
}

input {
  border-radius: 15px;
  padding: 8px;
  margin: 0px 0px 0px 5px
}

JavaScript

function buy(){
	var name = document.getElementById('name').value;
	alert(name+"您好!謝謝您對我們的衣服有興趣！請致電 0987-654-321，會有專人提供您報價！");
}

function more(){
	alert("我們工廠位於新北市，通過國際 ISO9001 認證，品質讓您放心！");
}