Css Hover Efekt İle Animasyonlu Buton Yapımı

Epiméthé · 2 Ağu 2022

Burada yaptığımız sadece renklerini vermek ve efekt içini oluşturmak.

[CODE lang="html" title="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">Button</a>
<a href="#" style="--clr:#6eff3e">Button</a>
<a href="#" style="--clr:#ff1867">Button</a>
</body>
</html>[/CODE]

İlk olarak fontumuzu içeri aktarıyoruz.

[CODE lang="css" title="CSS"]@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
*[/CODE]

Sonrasında arkaplanı ve sergilenmesini ayarlıyoruz.

[CODE lang="css" title="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;
}[/CODE]

Artık butonumuza başlayalım.

[CODE lang="css" title="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;
}[/CODE]

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.

[CODE lang="css" title="CSS"]a:hover
{
background: var(--clr);
color: var(--clr);
letter-spacing: 0.25em;
box-shadow: 0 0 35px var(--clr);
}[/CODE]

Burada ise html tarafında verdiğimiz --clr nimetimizi renk ve arkaplanda kullandık. Bu bize css'te çok avantaj sağlamakta.

[CODE lang="css" title="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;
}[/CODE]

Burada diğer alanların ayarlamalarını yapıp görünmez olduğu için span'a z index verdik.

[CODE lang="css" title="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;

}[/CODE]

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.

[CODE lang="css" title="CSS"]a:hover i::before{
width:20px;
left:20%;
}[/CODE]

Butonun üstüne gelinince ise yukarıdaki kesitimizin genişliğini ve soldan 20 boşluk olacak şekilde tanımlamalarımızı yaptık.

[CODE lang="css" title="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%;
}[/CODE]