Kaydol ve Giriş Butonlarına çerçeve ekleme

Şu an “Kaydol” ve “Giriş” butonları için FlarumTR’de kullandığım özelleştirmelerini aşağıda paylaştım. Aşağıdaki kodlar Kaydol ve Giriş butıonlarını FlarumTR ile aynı yapar. Renkleri değiştirebilirsiniz. İsterseniz ikonda ekleyebilirsiniz.

https://flarumtr.com/d/693-flarumda-kayit-ol-ve-giris-butonlarina-ikon-ekleme

Burada dikkat etmeniz gereken nokta, Kaydol ve Giriş butonlarını nasıl kullandığınız. Mesela ben giriş butonunu GiRiŞ şeklinde kullanıyorum. Giriş kelimesindeki i harfleri küçük harf, diğerleri büyük harf. Demek istediğim şu ki, sitenizde giriş ve kaydol nasıl yazılmışsa aşağıdaki kodlarda ( [title="GİRİŞ"] ) o şekilde yazılması gerekiyor.

@media (max-width: 767px) { #header-secondary > ul > li.item-logIn  > button[title="Giriş Yap"] {margin-top:10px;}}

#header-secondary > ul > li.item-logIn  > button[title="Giriş Yap"]:hover {
    background: #1C9963 !important;
    margin-left: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    transition-duration: 1s;
    color: #fff;
    border-radius: 30px;
    width: 100px;
    text-align: center;
    transition: margin-right .1s;}

#header-secondary > ul > li.item-signUp > button[title="Kaydol"]:hover {
    background: #1f57a0 !important; 
    margin-left: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    transition-duration: 1s;
    color: #fff; 
    border-radius: 30px;
    width: 100px;
   text-align: center;
   transition: margin-right .1s;}

#header-secondary > ul > li.item-logIn  > button[title="Giriş Yap"] {
    border: 2px solid #1C9963;
    margin-left: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    transition-duration: 1s;
    color: #1C9963;
    border-radius: 30px;
    width: 100px;
    text-align: center;
    font-weight: 700;}

#header-secondary > ul > li.item-signUp > button[title="Kaydol"] {
    border: 2px solid  #1f57a0; 
    margin-left: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    transition-duration: 1s;
    color:  #1f57a0; 
    border-radius: 30px;
    width: 100px;
   text-align: center;
   font-weight: 700;}