JS_lesson1

https://codelove.tw/@howtomakeaturn/post/ga9V5q

by j437437

HTML

<div class="wrap">
  <button onclick="inquiryFunction()" class="btn" type="button">我要訂購</button>
  <button onclick="introFunction()" class="btn" type="button">認識工廠</button>
</div>

CSS

* {
  padding: 0px;
  margin: 0px;
}

body {
  background-color: #ECF5FF;
}

.wrap {
  margin: 50px auto;
  display: flex;
  justify-content: center;
}

.btn {
  border-radius: 5px;
  width: 150px;
  height: 60px;
  border: white;
  margin: 80px 20px;
  background-color: #3399CC;
  color: white;
  font-size: 20px;
  box-shadow: 10px 5px 5px rgba(1, 0, 0, 0.2);
}

.btn:hover {
  /* :hover 代表滑鼠移到元素上時的狀態 */
  transform: scale(1.05);
}

.btn:active {
  /* :active是滑鼠點擊元素的狀態 */
  transform: scale(1);
}

JavaScript

function inquiryFunction() {
alert('謝謝您對我們的衣服有興趣！請致電 0987-654-321，會有專人提供您報價！')
}

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