DEV Community

Supriya J
Supriya J

Posted on

How to Create a Simple Button (Beginner CSS)

#css #beginners #frontend #webdesign

Buttons are easy
You only need background, padding, border-radius.

Simple Button Code

<button class="gold-btn">Buy Now</button>
Enter fullscreen mode Exit fullscreen mode 
.gold-btn {
  background: #D4AF37;
  padding: 10px 18px;
  border-radius: 8px;
  color: #fff;
  border: none;
  cursor: pointer;
}
Enter fullscreen mode Exit fullscreen mode

Bonus: Hover Effect

.gold-btn:hover {
  opacity: 0.9;
}
Enter fullscreen mode Exit fullscreen mode

Comment down for more such simple and classy codes.

Top comments (0)