Merhaba Arkadaşlar
Bu gün sizlerle efektif bir buton yapımını paylaşacağım.
İlk olarak html kodlarımızı paylaşıyorum. Burada yaptığımız sadece renklerini vermek ve efekt için i oluşturmak.
İlk olarak fontumuzu içeri aktarıyoruz.
Sonrasında arkaplanı ve sergilenmesini ayarlıyoruz.
Artık butonumuza başlayalım.
Burada kolay konumlandırma açısından relative verip çerçeve rengini vs ayarladık. Font genişlikleri ve sağ sol boşlukları vs ayarladık.
Burada ise html tarafında verdiğimiz --clr nimetimizi renk ve arkaplanda kullandık. Bu bize css'te çok avantaj sağlamakta.
Burada diğer alanların ayarlamalarını yapıp görünmez olduğu için span'a z index verdik.
Geldik en can alıcı kısıma.
Burada üstteki boşluğumuzun yerini ve zamanını belirledik. Left 80% ile sağ tarafta olacağını belirttik. Ve x ekseninde %50 yer değiştirecek dedik.
Butonun üstüne gelinince ise yukarıdaki kesitimizin genişliğini ve soldan 20 boşluk olacak şekilde tanımlamalarımızı yaptık.
Aynı işlemleri alttaki kesit içinde yaptık ve yukarıdakinin tersi şeklinde konumlandırdık. Artık herşey tamam.
İyi Forumlar
Bu gün sizlerle efektif bir buton yapımını paylaşacağım.
İlk olarak html kodlarımızı paylaşıyorum. Burada yaptığımız sadece renklerini vermek ve efekt için i oluşturmak.
HTML:
<!DOCTYPE htmL>
<html>
<head>
<title>CSS Modern Button</title>
<link rel="stylesheet" type="text/css" href="css/buton2.css">
</head>
<body>
<a href="#" style="--clr:#1e9bff"><span>Button</span><i></i></a>
<a href="#" style="--clr:#6eff3e"><span>Button</span><i></i></a>
<a href="#" style="--clr:#ff1867"><span>Button</span><i></i></a>
</body>
</html>İlk olarak fontumuzu içeri aktarıyoruz.
CSS:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
*Sonrasında arkaplanı ve sergilenmesini ayarlıyoruz.
CSS:
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body
{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #27282c;
flex-direction:column;
gap:50px;
}Artık butonumuza başlayalım.
CSS:
a
{
position: relative;
background: #fff;
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: l.Sem;
letter-spacing: 0.1em;
font-weight: 400;
padding: 10px 30px;
transition: 0.5s;
}Burada kolay konumlandırma açısından relative verip çerçeve rengini vs ayarladık. Font genişlikleri ve sağ sol boşlukları vs ayarladık.
CSS:
a:hover
{
background: var(--clr);
color: var(--clr);
letter-spacing: 0.25em;
box-shadow: 0 0 35px var(--clr);
}Burada ise html tarafında verdiğimiz --clr nimetimizi renk ve arkaplanda kullandık. Bu bize css'te çok avantaj sağlamakta.
CSS:
a:before
{
content:'';
position:absolute;
inset:2px;
background:#27282c;
}
a span
{
position:relative;
z-index:1;
}
a i
{
position:absolute;
inset:0;
display:block;
}Burada diğer alanların ayarlamalarını yapıp görünmez olduğu için span'a z index verdik.
Geldik en can alıcı kısıma.
CSS:
a i::before{
content:'';
position: absolute;
top:0;
left:80%;
width:10px;
height:4px;
background:#27282c;
transform: translateX(-50%) skewX(325deg);
transition:0.5s;
}Burada üstteki boşluğumuzun yerini ve zamanını belirledik. Left 80% ile sağ tarafta olacağını belirttik. Ve x ekseninde %50 yer değiştirecek dedik.
CSS:
a:hover i::before{
width:20px;
left:20%;
}Butonun üstüne gelinince ise yukarıdaki kesitimizin genişliğini ve soldan 20 boşluk olacak şekilde tanımlamalarımızı yaptık.
CSS:
a i::after{
content:'';
position: absolute;
bottom:0;
left:20%;
width:10px;
height:4px;
background:#27282c;
transform: translateX(-50%) skewX(325deg);
transition:0.5s;
}
a:hover i::after{
width:20px;
left:80%;
}Aynı işlemleri alttaki kesit içinde yaptık ve yukarıdakinin tersi şeklinde konumlandırdık. Artık herşey tamam.
İyi Forumlar
