Dodanie buttonów jak tutaj na forum

Witam, chciałbym dodać buttony (nie koniecznie takie same) jak tutaj na forum czyli jak wpiszę: 

[szukaj]

wyskakuje mi takie coś:

Akcja "Pokochaj wyszukiwarkę"

jest jakiś poradnik na to? Jeśli był już taki temat to przepraszam

ale gdzie to chcesz dodac?

W ACP > Konfiguracja > MyCode > Nowe MyCode i tam robisz takie właśnie przyciski

a co to za sztuka zrobić mycode ?
ACP -> konfiguracja -> MyCode
Tytuł (wymysl cos)
Krótki opis (wymysl cos)
Wyrażenie regularne np.

\[szukaj]

Zamiana

<div class="button szukaj"><a href="link">button ala mybboard</a></div>

i w global.css

.szukaj a {
    background:seagreen;
    color:#fff;
}

.szukaj a:hover{
    background:#1F7143;
}

.button a{
    font-size:17px;
    width:60%;
    padding:15px;
    margin:15px auto;
    display:block;
    border-radius:3px;
    text-align:center;
}

.button i{
    font-size:25px;
    margin:0 10px 0 0;
    vertical-align:middle;
}

style ukradłem to z mybboard.pl mam nadzieje ze się nie wkurzycie (nie chciało mi się pisać od podstaw)

@edit
dodatkowo możesz dodać ikonke np. lupa z tej stronki http://fortawesome.github.io/Font-Awesome/icons/

czyli zmiana będzie wyglądała tak:

<div class="button szukaj"><a href="link"><i class="fa fa-thumbs-o-up"></i>button ala mybboard</a></div>

Nie działa. CSS wkleiłem :p
Edit: Działa Dzięki wszystkim, a zwłaszcza @musicpower

Coś źle robisz. http://scr.hu/78l2/glj67

<div class="button szukaj"><a href="link"><i class="fa fa-thumbs-o-up"></i>button ala mybboard</a></div>

Już wszystko działa, dzięki Wam

temat dotyczący mybb w HP?

Nie wiedziałem, czy dodać to do Pluginów czy do stylów, grafiki

no pluginów to nie dotyczy, to tylko Style, szablony i grafika

Dodam jeszcze coś od siebie.
Jeśli chcesz te ikonki obok tekstu to robisz tak

<a><i class="fa"></i>tekst</a>

a w css'ach

i::before{content:""}
.fa{font-family:FontAwesome;margin-right:25px;display:inline-block}

Czcionkę to masz tutaj
https://fortawesome.github.io/Font-Awesome/
a kod podebrany z tej strony na importa wygląda tak

@font-face {
   font-family: "FontAwesome";
   font-style: normal;
   font-weight: normal;
   src: url("../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0") format("embedded-opentype"), url("../fonts/fontawesome-webfont.woff2?v=4.3.0") format("woff2"), url("../fonts/fontawesome-webfont.woff?v=4.3.0") format("woff"), url("../fonts/fontawesome-webfont.ttf?v=4.3.0") format("truetype"), url("../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular") format("svg");

Wiadomo możesz sobie wszystko poprzestawiać do swoich potrzeb tak jak tutaj font-size jest na 25px

Też fajnie Dzięki

ooo nawet nie wiedziałem że można zaznaczać kilka najlepszych odpowiedzi

@NiespecjalnieUzdolniony niestety z tym co podałeś jest pewien problem
mianowicie ten kod do css

i::before{content:""}
.fa{font-family:FontAwesome;margin-right:25px;display:inline-block}

po uzyciu jego, wszystkie fonty z https://fortawesome.github.io/Font-Awesome/ będą przesunięte w lewo o 25px

wszystkie z klasą .fa
Jakiś z tym problem?
Ja widzę inny jak będzie znacznik <i> to zawsze wstawi .
Trzeba tutaj jakąś klasę pewno zastosować aby to lepiej działało.