Reka bentuk butang web CSS: cipta pelbagai gaya butang yang keren

Reka bentuk butang web CSS: Buat pelbagai gaya butang yang menarik, contoh kod khusus diperlukan

Dalam reka bentuk web, butang adalah elemen yang sangat penting, kerana ia bukan sahaja pautan antara pengguna dan tapak web, tetapi juga Meningkatkan kesan visual keseluruhan dan pengalaman pengguna. Gaya butang yang baik bukan sahaja mesti mempunyai penampilan yang menarik, tetapi juga perlu mengambil kira beberapa butiran berfungsi, seperti kesan klik, kesan hover, dsb. Artikel ini akan berkongsi dengan anda beberapa teknik reka bentuk butang CSS dan gaya yang menarik, serta memberikan contoh kod, dengan harapan dapat membantu anda membuat butang reka bentuk yang lebih baik dan menambahkan lebih banyak kreativiti pada tapak web dan aplikasi.

1. Butang CSS Asas

Mula-mula, mari lihat gaya butang CSS yang paling asas:

Kod HTML:

<button class="btn">Click me</button>  

Gaya CSS:

.btn {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.btn:hover {
  background-color: #3e8e41;
}

Butang ini mempunyai latar belakang hijau, teks putih dan jidar bulat. Apabila tetikus melayang di atas butang, warna latar belakang bertukar kepada hijau gelap, mencapai kesan tuding mudah. Gaya butang ini pada asasnya boleh digunakan pada kebanyakan senario. Butang kesan stereoskopik 3D hanya membawa kesan visual kepada pengguna, tetapi juga meningkatkan pengalaman pengguna.

3. Butang tukar latar belakang

Gaya butang berikut memberikan pengguna isyarat visual yang lebih baik melalui perubahan kecerunan warna latar belakang:

Kod HTML:

<button class="btn-3d">Click me</button>

Gaya CSS:

.btn-3d {
    border: none;
    color: #fff;
    font-size: 25px;
    line-height: 1;
    margin: 20px;
    padding: 10px 20px;
    position: relative;
    text-align: center;
    text-shadow: rgba(0,0,0,.4) 1px 1px;
    transform-style: preserve-3d;
    transition: all .3s ease-out;
    background: linear-gradient(to bottom, #556270 0%,#616161 100%);
    background-color: #556270;
}

.btn-3d:before,
.btn-3d:after {
    border: none;
    content: '';
    position: absolute;
    top: calc(50% - 2px);
    left: 0;
    height: 4px;
    width: 100%;
    transform-style: preserve-3d;
    transition: all .3s ease-out;
}

.btn-3d:before {
    background: #BD3F32;
    transform: translateZ(-1px);
    box-shadow: 0 0 8px rgba(189,63,50,.7);
}

.btn-3d:after {
    background: #3F7FBC;
    transform-origin: left;
    transform: rotateY(90deg) translateZ(-1px);
    box-shadow: 0 0 8px rgba(63,127,188,.7);
}

.btn-3d:hover {
    background: linear-gradient(to bottom, #BD3F32 0%,#616161 100%);
    transform: translateZ(-6px);
    text-shadow: none;
    box-shadow: 0 0 8px rgba(0,0,0,.5);
}

.btn-3d:hover:before {
    transform: translateZ(-13px) rotateY(60deg);
}

.btn-3d:hover:after {
    transform: rotateY(-60deg) translateZ(-13px);
    transition-delay: .05s;
}

Gaya butang ini Ciri-cirinya ialah latar belakang warna berubah secara beransur-ansur dalam keadaan tuding, yang boleh membimbing pengguna secara visual dengan lebih baik. . kawasan sekeliling butang Sempadan putih muncul, kawasan berbentuk segi empat tepat di dalam butang bertukar putih, dan teks butang bertukar hijau. Apabila pemulihan keseluruhan berlaku, terdapat kesan kecerunan. Butang memuatkan kandungan akan disembunyikan, dan animasi berputar akan muncul untuk mengingatkan pengguna bahawa ia sedang dimuatkan Kesan keseluruhannya agak intuitif.

Ringkasan

Melalui pengenalan lima gaya butang di atas, kita dapat melihat dengan jelas bahawa butang yang baik bukan sahaja memerlukan kesan visual yang menarik, tetapi juga perlu memberi perhatian kepada beberapa butiran berfungsi, seperti perubahan dalam keadaan tuding, selepas interaksi mengklik, dsb. Gaya butang yang disediakan dalam artikel ini semuanya ditulis berdasarkan CSS dan boleh digunakan dengan mudah dalam projek sebenar. Apabila menulis halaman web, anda boleh memberi lebih perhatian kepada pelaksanaan beberapa kesan khas dan mencipta butang yang lebih sesuai dengan keperluan anda.

Atas ialah kandungan terperinci Reka bentuk butang web CSS: cipta pelbagai gaya butang yang keren. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!