CSS Butonlar

No Style ButtonStyled Button

.demo-btn1 {
    color: #fff;
    background: rgb(226, 19, 70);
    outline: 0; /* Button default siyah dış dolguya sahip Reset Button*/
    border: 0; /* button default olarak siyah bordera sahip Reset Button*/
    padding: 12px 25px;
    display: inline-block;
    font-weight: 600;
    font-size: 15px;

}
                

Button Hover Effect

button:hover{...} şeklinde csss kodlarımızı yazarak buton üzerine mouse ile gelindiğinde hover efekti verebilirsiniz.

ipucu : buttona geçişli bir efekt vermek isterseniz aşağıdaki CSS transition özelliğini kullanabilirsiniz.

.demo-btn1-hover {
    ....
    transition: 0.3s ease all;
    border:2px solid transparent;
}
.demo-btn1-hover:hover{
    color: rgb(226, 19, 70);
    border-color: currentColor; /* Current Color = mevcut text rengi */
    background-color: #fff;
}
                

Styled Outline Button

Small ve Large Button

Small ButtonDefault ButtonLarge Button

Padding 8px 25pxPadding 12px 25pxPadding 16px 25px

.demo-btn1{
    padding:12px 25px;
}
.demo-btn1.small{
    padding:8px 25px;
}
.demo-btn1.large{
    padding:16px 25px;
}
                

Block-Level Buttons

Block Level Button1Block Level Button2Block Level Button3Block Level Button4

&.block-level {
    display: block;
    margin-bottom: 5px; /* Aralarında yatayda boşluk olması için aşağıya 5px dış boşluk atanıştır. */
    width: 100%;
  }
                

Yukarıdaki örnekte block-level button oluşturmak için display:block; özlliği kullanılmıştır.
Genişliği full-width yapmak için de width:100%; özelliği atanmıştır.

Outline Button Effect

outline button effect örenek olarak için button'a bir border değeri verilir ve hover olduğunda arka plan rengi eklenir ve border transparent yapılır.

Outline Button

.demo-btn-outline {
    color: rgb(226, 19, 70);
    outline: 0;
    border: 2px solid currentcolor;
    transition: 0.3s ease all;
    background-color: #fff;
    font-size: 15px;
    font-weight: 600;
    padding: 12px 25px;
    display: inline-block;
}
.demo-btn-outline:hover {
    color: #fff;
    border-color: transparent;
    background-color: rgb(226, 19, 70);
}