Jak stworzyć ładne, zaokrąglone przyciski za pomocą CSS?  O wiele lepiej jest skorzystać z techniki sliding doors, niż z obrazkowego tła dla przycisków, ponieważ można zastosować dowolny styl linku i jednocześnie nie ma potrzeby tworzenia nowego obrazu dla szerszego czy węższego przycisku.

Co to jest sliding doors?

Sposób jest bardzo prosty.  Chcemy mieć zmienną szerokości przycisku, więc musimy znaleźć sposób, aby rozciągnąć go w poziomie.  Uzyskamy ten efekt jeśli stworzymy dwa obrazy tła, z których będzie składał się przycisk: jeden po lewej stronie i jeden dla prawej strony – tak jak w poniższym przykładzie.

  

Mniejszy obrazek po prawej stronie będzie przesuwał się nad większym, lewym obrazkiem (stąd nazwa). Im bardziej prawy obrazek nasunie się na lewy tym węższy będzie przycisk, i odwrotnie.

Style dla przycisku

Przyjrzyjmy się elementowi HTML, który będzie udawał przycisk. W elemencie <a> mamy element <span>. Span zawiera lewy, szerszy obrazek oraz tekst. Rozmiar przycisku zależy od długości tekstu.

<a class="button" href="#"><span>Submit</span></a>

Przyjrzyjmy się stylom CSS. Mamy klasę .button dla elementu <a> i klasę .button span dla elementu <span>znajdującego się wewnątrz <a>. Mamy również klasę .button: hover span która zmienia styl czcionki po najechaniu kursorem na przycisk.

a.button {
  /* PRZESUWAJĄCY SIĘ PRAWY OBRAZEK */
  background: transparent url('button_right.png') no-repeat scroll top right;
  display: block;
  float: left;
  height: 32px; /* wysokość obrazka */
  margin-right: 6px;
  padding-right: 20px; /* zależne od szerokości prawego obrazka */
  /* STYL CZCIONKI */
  text-decoration: none;
  color: #000000;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
}
a.button span {
  /* LEWY OBRAZEK */
  background: transparent url('button_left.png') no-repeat;
  display: block;
  line-height: 22px; /* zależne od wysokości przycisku */
  padding: 7px 0 5px 18px;
}
a.button:hover span{
  text-decoration:underline;
}

Poniżej uzyskany efekt
Sliding doors - przykład