JSFiddle - React, Tailwind, and code Playground
HTML
<button class='show' onclick=show()>我要訂購</button>
<button class='about' onclick=about()>認識工廠</button>
CSS
.show, .about {
padding: 10px;
display: block;
border: 0;
background-color: #fa0;
font-size: 24px;
color: blue;
font-weight: bold;
border-radius: 10px;
box-shadow: 5px 5px 5px #ccc;
cursor: pointer;
}
button + button {
margin-top: 20px;
}
.show:hover, .about:hover {
transform: scale(1.2);
color: white;
background-color: #aaa;
}
JavaScript
function show() {
const message = `謝謝您對我們的衣服有興趣!請致電 0987-654-321,會有專人提供您報價!`;
alert(message)
};
function about() {
const message = `我們工廠位於新北市,通過國際 ISO9001 認證,品質讓您放心!`;
alert(message)
}