Daha fazla bilgi ›

Satın al ›
iPhone 14 Pro bootstrap gibi buton yap

index.html

@@ -68,9 +68,9 @@
         <div class="max-w-7xl mx-auto px-4 text-center">
             <h1 class="text-5xl font-bold mb-4">iPhone 14 Pro</h1>
             <h2 class="text-2xl mb-6">Pro. Beyond.</h2>
-            <div class="flex justify-center space-x-4 mb-8">
-                <a href="#" class="text-blue-500 hover:underline text-lg font-medium">Daha fazla bilgi ›</a>
-                <a href="#" class="text-blue-500 hover:underline text-lg font-medium">Satın al ›</a>
+            <div class="flex justify-center space-x-6 mb-8">
+                <a href="#" class="px-6 py-2 border-2 border-blue-500 text-blue-500 rounded-full hover:bg-blue-500 hover:text-white transition-colors duration-300 text-lg font-medium">Daha fazla bilgi</a>
+                <a href="#" class="px-6 py-2 bg-blue-500 text-white rounded-full hover:bg-blue-600 transition-colors duration-300 text-lg font-medium">Satın al</a>
             </div>
 <img src="https://www.apple.com/v/iphone/home/bh/images/overview/hero/iphone_14_pro_hero__e8a2d10gdmoy_large.jpg" alt="iPhone 14 Pro" class="mx-auto max-w-full">
         </div>
@@ -86,9 +86,9 @@
                     <div class="p-6">
                         <h3 class="text-xl font-semibold mb-2">iPhone 14</h3>
                         <p class="text-gray-600 mb-4">Wonderfull.</p>
-                        <div class="text-blue-500 space-x-4 text-lg">
-                            <a href="#" class="hover:underline font-medium">Daha fazla bilgi ›</a>
-                            <a href="#" class="hover:underline font-medium">Satın al ›</a>
+                        <div class="space-x-4 text-lg">
+                            <a href="#" class="px-4 py-1 border-2 border-blue-500 text-blue-500 rounded-full hover:bg-blue-500 hover:text-white transition-colors duration-300 text-sm font-medium">Daha fazla bilgi</a>
+                            <a href="#" class="px-4 py-1 bg-blue-500 text-white rounded-full hover:bg-blue-600 transition-colors duration-300 text-sm font-medium">Satın al</a>
                         </div>
 </div>
                     <img src="https://www.apple.com/v/iphone/home/bh/images/overview/compare/compare_iphone_14__baxk5t4p5vpy_large.jpg" alt="iPhone 14" class="w-full">
@@ -98,9 +98,9 @@
                     <div class="p-6">
                         <h3 class="text-xl font-semibold mb-2">Apple Watch Series 8</h3>
                         <p class="text-gray-600 mb-4">A healthy leap ahead.</p>
-                        <div class="text-blue-500 space-x-4 text-lg">
-                            <a href="#" class="hover:underline font-medium">Daha fazla bilgi ›</a>
-                            <a href="#" class="hover:underline font-medium">Satın al ›</a>
+                        <div class="space-x-4 text-lg">
+                            <a href="#" class="px-4 py-1 border-2 border-blue-500 text-blue-500 rounded-full hover:bg-blue-500 hover:text-white transition-colors duration-300 text-sm font-medium">Daha fazla bilgi</a>
+                            <a href="#" class="px-4 py-1 bg-blue-500 text-white rounded-full hover:bg-blue-600 transition-colors duration-300 text-sm font-medium">Satın al</a>
                         </div>
 </div>
                     <img src="https://www.apple.com/v/watch/home/2022/images/overview/hero/hero_s8__f265j5okx8qe_large.jpg" alt="Apple Watch Series 8" class="w-full">
@@ -110,9 +110,9 @@
                     <div class="p-6">
                         <h3 class="text-xl font-semibold mb-2">MacBook Air with M2 chip</h3>
                         <p class="text-gray-600 mb-4">Don't take it lightly.</p>
-                        <div class="text-blue-500 space-x-4 text-lg">
-                            <a href="#" class="hover:underline font-medium">Daha fazla bilgi ›</a>
-                            <a href="#" class="hover:underline font-medium">Satın al ›</a>
+                        <div class="space-x-4 text-lg">
+                            <a href="#" class="px-4 py-1 border-2 border-blue-500 text-blue-500 rounded-full hover:bg-blue-500 hover:text-white transition-colors duration-300 text-sm font-medium">Daha fazla bilgi</a>
+                            <a href="#" class="px-4 py-1 bg-blue-500 text-white rounded-full hover:bg-blue-600 transition-colors duration-300 text-sm font-medium">Satın al</a>
                         </div>
 </div>
                     <img src="https://www.apple.com/v/macbook-air/m/images/overview/hero/hero_macbook_air__f2e6b8chbxmq_large.jpg" alt="MacBook Air" class="w-full">