JSFiddle - React, Tailwind, and code Playground

by Hoce1029

HTML

<html>

<body>

<button class="buy" onclick="buy()">我要訂購</button>

<button class="introduce" onclick="introduce()">認識工廠</button>

</body>

</html>

CSS

button{
  width:100px;
  height:100px;
  margin:20px;
  padding:20px;
  color:#000080;
  background-color:#6495ed;
  border-radius:15px 10px 15px 10px;
  border-style:none;
  font-style:italic;
  font-size:15px;
}
.buy,.introduce{
  color:#000080;
  border-style:dashed;
  font-size:20px;
  font-weight:bold;
  cursor: pointer;
}
.buy:hover{
  background-color:#87ceeb;
}
.introduce:hover{
  background-color:#ffc0cb;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-color:#fff0f5;
}

JavaScript

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

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