JSFiddle - React, Tailwind, and code Playground

by skrbomb

HTML

<script src="https://kit.fontawesome.com/f39681e931.js" crossorigin="anonymous"></script>

<button onclick='orderList()'>
  <i class="fa-solid fa-pen-to-square" style="color: #74C0FC;"></i>
  <br>
  我要訂購
</button>
<button onclick='facInf()'>
  <i class="fa-solid fa-industry" style="color: #74C0FC;"></i>
  <br>
  認識工廠
</button>

CSS

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  border: none;
}


button{
  margin:20px;
  background-color:grey;
  height:100px;
  width:100px;
  color:black;
  font-weight:600;
  font-size:16px;
  padding:10px 10px;
  border-radius:50%;
  border:none;
}

button i{
  font-size:24px;
  margin-bottom:5px;
}

button:hover{
  background-color: rgba(0, 99, 56, 0.859);
  color:white;
}

JavaScript

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

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