Teşekkürler hocam,PM'den son sorum daha var.
Yukarıdaki mesajımda olan kodlar bana ait değildir önceden bilginiz olsun. İnternetteki bir kaynaktan sadeleştirdim.
PM'den bahsettiğim birleştirilmiş kodlar aşağıda;
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Buton Kodlarımız</title>
<style>
.frame {
width: 90%;
margin: 40px auto;
text-align: center;
}
button {
margin: 20px;
}
.custom-btn {
color: #fff;
width: 130px;
height: 40px;
padding: 10px 25px;
font-family: 'Lato', sans-serif;
font-weight: 500;
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: inline-block;
}
/* 1. butona ait kodlar */
.btn-1 {
border: none;
background-color: #ff9aff;
box-shadow: 0 0 5px #ef97e8;
}
/* Üzerine gelme efekti */
.btn-1:hover {
box-shadow: 0 0 10px #ef97e8, 0 0 20px #ef97e8, 0 0 20px #fff inset;
}
/* 2. Butona ait kodlar */
.btn-2 {
color: #0bf4f3;
border: 1px solid #0bf4f3;
box-shadow: 0 0 5px #0bf4f3, 0 0 5px #0bf4f3 inset;
}
.btn-2:before {
height: 0%;
width: 2px;
}
/* Üzerine gelme efekti */
.btn-2:hover {
color: #fff;
box-shadow: inset 0 0 10px #0bf4f3, 0 0 20px #0bf4f3 inset, 0 0 20px #0bf4f3 inset;
}
</style>
</head>
<body>
<div class="frame">
<button class="custom-btn btn-1">Read More</button> <!--Bunu kullanacaksanız alt satırı silin. -->
<button class="custom-btn btn-2">Read More</button> <!--Bunu kullanacaksanız üst satırı silin. -->
</div>
</body>
</html>