JSFiddle - React, Tailwind, and code Playground
HTML
<div class='wrap'>
<button onclick="myFunction()">我要訂購</button>
<button onclick="thisFunction()">認識工廠</button>
</div>
CSS
*{
padding: 0;
margin: 0;
}
.wrap{
width: 100%;
height: 100vh;
background-color: lightpink;
display: flex;
align-items: center;
justify-content: center;
}
button{
padding: .5rem 1rem;
border: none;
border-radius:10px;
cursor: pointer;
}
button:hover{
color:red;
background-color: pink;
border: 1px solid red;
}
.wrap button:first-child{
margin-right: 1rem;
}
JavaScript
function myFunction()
{
alert('謝謝您對我們的衣服有興趣!請致電 0987-654-321,會有專人提供您報價!');
}
function thisFunction()
{
alert('我們工廠位於新北市,通過國際 ISO9001 認證,品質讓您放心!');
}