Scribd
Upload
6 views

button css

The document provides an HTML and CSS code for various button styles including Basic, Rounded, Outline, Shadow, Icon, Gradient, and Hover Effect buttons. Each button style has distinct visual characteristics and hover effects. The explanations detail the appearance and functionality of each button type.

Uploaded by

Resa Zulfikar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

button css

The document provides an HTML and CSS code for various button styles including Basic, Rounded, Outline, Shadow, Icon, Gradient, and Hover Effect buttons. Each button style has distinct visual characteristics and hover effects. The explanations detail the appearance and functionality of each button type.

Uploaded by

Resa Zulfikar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

<!

DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Various Button Styles</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<!-- Basic Button -->

<a href="#" class="btn basic">Basic Button</a>

<!-- Rounded Button -->

<a href="#" class="btn rounded">Rounded Button</a>

<!-- Outline Button -->

<a href="#" class="btn outline">Outline Button</a>

<!-- Button with Shadow -->

<a href="#" class="btn shadow">Button with Shadow</a>

<!-- Icon Button -->

<a href="#" class="btn icon-button"><span class="icon">★</span> Icon Button</a>

<!-- Button with Gradient -->

<a href="#" class="btn gradient">Gradient Button</a>

<!-- Button with Hover Effect -->

<a href="#" class="btn hover-effect">Hover Effect Button</a>


</body>

</html>

Css

/* General Button Styling */

.btn {

display: inline-block;

padding: 10px 20px;

font-size: 16px;

color: white;

text-decoration: none;

margin: 10px;

transition: all 0.3s ease;

border-radius: 5px;

/* Basic Button */

.basic {

background-color: #3498db;

/* Rounded Button */

.rounded {

background-color: #2ecc71;

border-radius: 50px;

/* Outline Button */

.outline {

color: #3498db;

background-color: transparent;
border: 2px solid #3498db;

.outline:hover {

background-color: #3498db;

color: white;

/* Button with Shadow */

.shadow {

background-color: #e74c3c;

box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);

.shadow:hover {

box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.4);

/* Icon Button */

.icon-button {

background-color: #9b59b6;

display: flex;

align-items: center;

justify-content: center;

.icon-button .icon {

margin-right: 8px;

/* Gradient Button */

.gradient {

background: linear-gradient(45deg, #ff6b6b, #f0e130);

}
.gradient:hover {

background: linear-gradient(45deg, #f0e130, #ff6b6b);

/* Button with Hover Effect */

.hover-effect {

background-color: #e67e22;

.hover-effect:hover {

background-color: #d35400;

transform: scale(1.05);

Penjelasan

• Basic Button: Tampilan dasar dengan warna biru.

• Rounded Button: Tombol dengan sudut bulat (oval).

• Outline Button: Tombol transparan dengan border yang berubah warna saat di-hover.

• Button with Shadow: Tombol dengan efek bayangan yang mempertegas tampilan.

• Icon Button: Tombol yang dilengkapi ikon, cocok untuk tombol dengan visual yang menarik.

• Gradient Button: Tombol dengan latar gradasi yang berganti arah saat di-hover.

• Hover Effect Button: Tombol yang sedikit membesar saat di-hover untuk memberi efek
interaktif.

You might also like