JavaScript 系列一：第1課

by tp655998

HTML

<section class="btn-group">
  <button class="btn order" onclick="order()">我要訂購</button>
  <button class="btn about" onclick="about()">認識工廠</button>  
</section>

CSS

button{
  border: none;
}
html{
  height: 100%;
}
body{
  height: 100%;
  background-color: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.btn-group{
  border-radius: .5rem;
  box-shadow: 0 0 .5rem #666;
  display: inline;
  padding: 1rem;
}
.btn{
  padding: .5rem;
  background-color: #fff;
  border: 1px solid #aaa;
  border-radius: .5rem;
  margin: 0 .2rem;
}

.btn:hover{
  background-color: #333;
  color: #fff;
  cursor: pointer;
}

.order{
  background-color: #EBB471;
}

JavaScript

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

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