JSFiddle - React, Tailwind, and code Playground

by 81ue_lan

HTML

<input id="customName" type="text" placeholder="訂購者姓名">
<button class="btn" onclick="showOrderMsg()">我要訂購</button>
<button class="btn" onclick="showInfoMsg()">認識工廠</button>

CSS

.btn{
  padding: 6px 8px;
  border: 1px solid #CAC531;
  border-radius: 200px;
  box-shadow: 1px 1px 10px #bbb;
  font-size: 14px;
  font-weight: 600;
  color: #CAC531;
  background-color: #F3F9A7;
  cursor: pointer;
  transition: 0.3s;
}
.btn:hover{
  border: 1px solid #F3F9A7;
  color: #F3F9A7;
  background-color: #CAC531;
}
#customName{
  padding: 5px 10px;
  border: 2px solid #CAC531;
  border-radius: 100px;
}
#customName:focus{
  outline: none;
}

JavaScript

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

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