JSFiddle - React, Tailwind, and code Playground

by etai200

HTML

<button onclick="order()">我要訂購</button>
<button onclick="contact()">認識工廠</button>

CSS

button{
  font-weight: bold;
  background-color: Orange;
  border: 2px solid Moccasin;
  color: white;
   width: 100px;
   height: 30px;
   margin: 5px;
    -webkit-border-radius: 50px;
   -moz-border-radius: 5px;
   border-radius: 5px;
}
button:hover{
  font-weight: bold;
  background-color: DarkOrange;
  border: 2px solid Moccasin;
  color: white;
   width: 100px;
   height: 30px;
   margin: 5px;
    -webkit-border-radius: 50px;
   -moz-border-radius: 5px;
   border-radius: 5px;
}
button:active{
  font-weight: bold;
  background-color: CornflowerBlue;
  border: 2px solid LightSkyBlue;
  color: white;
   width: 100px;
   height: 30px;
   margin: 5px;
    -webkit-border-radius: 50px;
   -moz-border-radius: 5px;
   border-radius: 5px;
}

JavaScript

function order()
{
  alert('謝謝您對我們的衣服有興趣！請致電 0987-654-321，會有專人提供您報價！');
}
function contact()
{
	alert('我們工廠位於新北市，通過國際 ISO9001 認證，品質讓您放心！')
}