Rumah >hujung hadapan web >tutorial css >Cara Membuat Butang Moden yang Menakjubkan dengan CSS dan HTML
Cara Membuat Butang Moden yang Menakjubkan dengan CSS dan HTML
- DDDasal
- 2024-11-18 08:00:03803semak imbas
Temui reka bentuk butang premium yang direka dengan kecerunan bercahaya, sempadan animasi dan kesan tuding lanjutan. Sesuai untuk projek web yang memerlukan elemen yang berkualiti tinggi dan menarik perhatian. Diilhamkan oleh pertempuran gladiator Rom purba, reka bentuk butang ini menangkap keamatan dan gaya yang diperlukan untuk permainan seperti Pertempuran Gladiators. Sesuai untuk digunakan dalam permainan interaktif, halaman pendaratan dan antara muka pengguna yang memerlukan pengalaman visual mewah.
Tag: Gladiators Battle, butang premium, animasi CSS, butang bercahaya, reka bentuk interaktif, UI/UX, reka bentuk web, HTML/CSS, animasi kecerunan, Rom purba, antara muka permainan, permainan gladiator
Mencipta butang yang menarik secara visual boleh meningkatkan pengalaman pengguna tapak web dengan ketara. Tutorial ini membimbing anda membina butang moden yang berkualiti tinggi dengan HTML dan CSS. Kami akan menambah animasi, kecerunan dan kesan tuding untuk menjadikannya interaktif dan bergaya. Ikuti bersama untuk mencipta butang bercahaya yang terasa premium dan menarik.
Langkah 1: Menyediakan Struktur HTML
Butang kami akan dibalut dalam bekas dengan kesan cahaya. Berikut ialah struktur HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Premium Button Tutorial</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div>
<p>button-container: Holds the button and glow effect.<br>
premium-btn: The button itself, which includes an animation span for additional effects.<br>
outer-glow: Adds an animated glow around the button for a high-impact visual effect.<br>
Step 2: Setting Up CSS Styles<br>
Base Styles<br>
First, we’ll define the styles for the body and button container.<br>
</p>
<pre class="brush:php;toolbar:false">body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #1b1b2f;
margin: 0;
font-family: Arial, sans-serif;
overflow: hidden;
}
.button-container {
position: relative;
display: inline-block;
}
Gaya ini memusatkan butang pada skrin, dengan warna latar belakang gelap untuk membuat kesan bercahaya muncul.
Menambahkan Kesan Cahaya
Kelas cahaya luar menambah cahaya besar berwarna-warni di sekeliling butang. Kesan ini dicapai dengan latar belakang kecerunan, kabur dan animasi yang berdenyut.
.outer-glow {
position: absolute;
top: -25px;
left: -25px;
right: -25px;
bottom: -25px;
border-radius: 50px;
background: linear-gradient(135deg, #1de9b6, #6a00f4, #ff4081, #1de9b6);
background-size: 400% 400%;
filter: blur(50px);
opacity: 0.8;
animation: pulseGlow 6s ease-in-out infinite;
pointer-events: none;
}
Penggayaan Butang
Seterusnya, mari kita gayakan butang itu sendiri. Di sini, kami menambahkan latar belakang kecerunan, fon tebal dan kesan bayang-bayang untuk rupa yang lebih tinggi.
.premium-btn {
padding: 20px 50px;
font-size: 22px;
font-weight: bold;
color: #fff;
background: linear-gradient(45deg, #00c6ff, #0072ff);
border: none;
border-radius: 50px;
position: relative;
overflow: hidden;
cursor: pointer;
transition: all 0.4s ease;
text-transform: uppercase;
letter-spacing: 2px;
box-shadow: 0px 4px 20px rgba(0, 255, 255, 0.4);
z-index: 1;
}
Menambahkan Animasi Sempadan
Rentang animasi .border di dalam butang mencipta jidar berwarna-warni yang berputar secara berterusan.
.border-animation {
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
border-radius: 50px;
background: linear-gradient(90deg, #1de9b6, #6a00f4, #ff4081, #1de9b6);
background-size: 300%;
z-index: -1;
animation: rotateBorder 4s ease-in-out infinite;
filter: blur(8px);
}
Kesan Tuding
Untuk menjadikan butang interaktif, kami menambah kesan tuding yang menukar kecerunan latar belakangnya, meningkatkan bayang kotak dan mencetuskan kesan riak.
.premium-btn:hover {
background: linear-gradient(45deg, #ff4081, #1de9b6);
color: #ffffff;
box-shadow: 0px 6px 30px rgba(0, 255, 255, 0.6), 0px 6px 30px rgba(255, 64, 129, 0.6);
transform: scale(1.05);
}
.premium-btn::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.2), transparent 70%);
transform: rotate(0deg);
border-radius: 50%;
filter: blur(50px);
opacity: 0.9;
}
.premium-btn:hover::before {
transform: rotate(45deg);
}
Kesan Riak
Kesan riak menambahkan animasi bulatan yang mengembang apabila butang dituding ke atas, memberikan sentuhan moden yang anggun.
.premium-btn::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255, 255, 255, 0.5);
border-radius: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: width 0.4s ease, height 0.4s ease, opacity 0.5s ease;
}
.premium-btn:hover::after {
width: 350%;
height: 350%;
opacity: 0;
}
Animasi dengan Bingkai Utama
Akhir sekali, kami mentakrifkan bingkai utama untuk putaran sempadan yang bercahaya dan latar belakang berdenyut.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Premium Button Tutorial</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div>
<p>button-container: Holds the button and glow effect.<br>
premium-btn: The button itself, which includes an animation span for additional effects.<br>
outer-glow: Adds an animated glow around the button for a high-impact visual effect.<br>
Step 2: Setting Up CSS Styles<br>
Base Styles<br>
First, we’ll define the styles for the body and button container.<br>
</p>
<pre class="brush:php;toolbar:false">body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #1b1b2f;
margin: 0;
font-family: Arial, sans-serif;
overflow: hidden;
}
.button-container {
position: relative;
display: inline-block;
}
Mencipta butang gaya premium dengan HTML dan CSS telah menjadi perjalanan yang memberi inspirasi dalam memanfaatkan teknik reka bentuk web moden untuk menghasilkan komponen yang menarik secara visual dan interaktif. Dengan menggabungkan kecerunan linear, animasi CSS dan kesan tuding, kami telah mereka bentuk butang yang kelihatan dinamik dan menarik—sempurna untuk menarik perhatian pengguna dan meningkatkan interaksi tapak web.
Projek ini menunjukkan kuasa CSS dalam mencipta kesan berlapis, seperti garis besar bercahaya, sempadan berputar dan animasi riak, semuanya tanpa bergantung pada JavaScript. Ini bukan sahaja memastikan antara muka yang pantas dan responsif tetapi juga menekankan bagaimana pilihan reka bentuk yang halus boleh meningkatkan pengalaman pengguna dengan ketara.
Sambil kami terus meneroka CSS dan trend reka bentuk moden, terdapat kemungkinan yang tidak berkesudahan untuk penyesuaian selanjutnya. Artikel akan datang dalam siri ini akan menyelami lebih mendalam ke dalam seni mencipta komponen web interaktif, meneroka teknik CSS lanjutan untuk reka bentuk responsif, animasi kompleks dan corak UX intuitif. Sama ada anda ingin meningkatkan projek peribadi atau tapak web profesional anda, menguasai teknik penggayaan ini akan memberikan anda alatan yang tidak ternilai untuk mencipta antara muka web yang menarik dan berpusatkan pengguna.
? Temui Lagi:
Terokai Pertempuran Gladiators: Temui strategi dan pengalaman pertempuran yang mengasyikkan di https://gladiatorsbattle.com
Lihat GitHub Kami: Lihat contoh dan tutorial kod di https://github.com/HanGPIErr/Gladiators-Battle-Documentation
Sambung di LinkedIn: Ikuti saya di LinkedIn untuk kemas kini mengenai reka bentuk web dan projek pembangunan di https://www.linkedin.com/in/pierre-romain-lopez/
Ikuti X: Ikuti perkembangan terkini tentang reka bentuk dan projek permainan di https://x.com/GladiatorsBT
Dengan meneruskan bersama kami, anda akan mendapat cerapan untuk mencipta reka bentuk yang cantik dan responsif dengan HTML dan CSS, menolak sempadan interaktiviti web dengan kod yang minimum. Sertai kami sambil kami meneroka lebih banyak teknik untuk menghidupkan elemen berkualiti premium yang menarik di web.
Atas ialah kandungan terperinci Cara Membuat Butang Moden yang Menakjubkan dengan CSS dan HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!