Тема: HTML CSS кнопка оплати пейпал зникає пр наведенні на неї курсора
ну що скажу перший раз роблю сайт (для серверу по одній грі ) на сайті має бути покупка донату ну ось по троху робив я сайт підключив кнопки оплати пейпал ну щоб можна було робити міжнародні перекази там є дві кнопки зробити покупку через акаунт пейпал та через дебетову карту і при наведені на ці кнопки вони стають невидимі але все ще функціональні в стилях CSS та самому коді HTML я не впливав на прозорість кнопок
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="https://www.paypal.com/sdk/js?client-id="></script>
<!-- Створюємо контейнер для кнопки -->
<div id="paypal-button-container"></div>
<script>
paypal.Buttons({
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{
amount: {
value: '0.01'
}
}]
});
},
onApprove: function(data, actions) {
return actions.order.capture().then(function(details) {
alert('Transaction completed by ' + details.payer.name.given_name + '!');
});
}
}).render('#paypal-button-container');
</script>ось весь код із CSS файлу
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
color: #333;
background-color: #fff;
}
header {
background-color: #003399;
color: #fff;
padding: 20px;
}
header h1 {
margin: 0;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
margin: 0 10px;
}
nav ul li a {
color: #fff;
text-decoration: none;
padding: 5px;
}
nav ul li a:hover {
background-color: #fff;
color: #003399;
}
section {
padding: 50px 20px;
}
section h2 {
margin: 0;
}
footer {
background-color: #003399;
color: #fff;
padding: 10px;
text-align: center;
}
#paypal-button-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.paypal-button {
box-shadow: 0px 8px 20px -5px rgba(0,0,0,0.75);
transition: box-shadow 0.2s;
}
.paypal-button:hover {
box-shadow: 0px 12px 25px -10px rgba(10, 105, 173, 0.75);
}
#paypal-button-container {
text-align: center;
margin-top: 50px;
}
.paypal-button:hover {
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
