JSFiddle - React, Tailwind, and code Playground

by kazekaze

HTML

<button onclick="myFunction()">Click me</button> <br><br> <br><br> <br><br>

<button class="BUY" onclick="myFunction01()">我要訂購</button> <br><br><br><br><br>

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

CSS

.BUY{    
    position: absolute;

    width: 120px;
    height: 50px;
    left: 150px;
    top: 100px;

    #border: 1px solid #0f838c;
    #margin-left: 0.25rem;
    #margin-right: 0.25rem;
    #border-radius: 50%;
    
    border-radius: 0.5rem;
    font-size: 22px;
    text-align: center;
    
    background-color: white;
    color: black;
    border: 2px solid #4CAF50;    
  
}


.BUY:hover{
#background-color:red;
background-color: #00cc66;
}


.INTRO{    
    position: absolute;

    width: 120px;
    height: 50px;
    left: 150px;
    top: 200px;
   
    border-radius: 0.5rem;
    font-size: 22px;
    text-align: center;
    
    background-color: white;
    color: black;
    border: 2px solid blue;    
  
}


.INTRO:hover{
background-color: #6699ff;
}

JavaScript

function myFunction()
{
  alert('你點擊了按鈕！');
  alert('這是很好的開始！');
}

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

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