Кнопка поиска как на youtube.com

Мне нравится минималистический дизайн в приложениях. Эталоном веб-приложений в категории минимализма дизайна я считаю youtube.com. Все по делу и к месту. Особенно симпатичны кнопки, в частности "Поиска". На первый взгляд все просто http://stackoverflow.com/questions/2564084/how-do-i-get-the-same-buttons-as-youtube. Но в FireFox есть особенность - на button показывается точечная граница. Как с этим бороться показано в Remove Button Focus Outline Using CSS
http://www.karlrixon.co.uk/articles/css/remove-button-focus-outline-using-css/

В итоге вот как выглядят разметка и стили кнопки Поиск на youtube.com

.yt-uix-button{
  padding:0 .5em;
  height:2.0833em;
  border:1px solid #ccc;
  background:#f6f6f6;
  background-image:-moz-linear-gradient(top,#ffffff,#efefef);
  background-image:-webkit-gradient(linear,left top,left bottom,from(#ffffff),to(#efefef));
  filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#efefef);
  -ms-filter:"progid:DXImageTransform.Microsoft.Gradient(startColorStr=#FFFFFF,endColorStr=#EFEFEF)";
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  border-radius:3px;
  white-space:nowrap;
  vertical-align:middle;
  cursor:pointer; 
  overflow:visible;
}

.yt-uix-button-content{
  line-height:1.6666em;
  display:inline-block;
  vertical-align:middle
}

.yt-uix-button:hover,.yt-uix-button:focus {
  border-color:#999;
  background:#f3f3f3;
  background-image:-moz-linear-gradient(top,#ffffff,#ebebeb);
  background-image:-webkit-gradient(linear,left top,left bottom,from(#ffffff),to(#ebebeb));
  filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb);
  -ms-filter:"progid:DXImageTransform.Microsoft.Gradient(startColorStr=#FFFFFF,endColorStr=#EBEBEB)";
  outline:0;
  -moz-box-shadow:0 0 3px #999;
  -webkit-box-shadow:0 0 3px #999;
  box-shadow:0 0 3px #999
}

.yt-uix-button:active {
  border-color:#999;
  background:#ddd;
  background-image:-moz-linear-gradient(top,#cccccc,#ffffff);
  background-image:-webkit-gradient(linear,left top,left bottom,from(#cccccc),to(#ffffff));
  filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#cccccc,endColorStr=#ffffff);
  -ms-filter:"progid:DXImageTransform.Microsoft.Gradient(startColorStr=#CCCCCC,endColorStr=#FFFFFF)"
}

.yt-uix-button img{
  vertical-align:middle;
  font-size:0
}

.yt-uix-button::-moz-focus-inner{
  border:0;
}

В разметке:

<button class="yt-uix-button" type="button">
   <span class="yt-uix-button-content">Search</span>
</button>

Ключевая строка, чтобы убрать точечную границу это .yt-uix-button::-moz-focus-inner{border:0;}

До этого для подобных кнопок использовал решение с http://stopdesign.com/eg/buttons/3.1/code.html. Но там неприятная особенность - в Хроме немного обрезается нижний правый угол у button, притом что с anchor все в порядке.

Есть еще классный проект по созданию кнопок http://css-tricks.com/examples/ButtonMaker

И напоследок отличный набор CSS-инструментов в статье 50 New Useful CSS Techniques, Tools and Tutorials http://www.smashingmagazine.com/2010/06/10/50-new-useful-css-techniques-tools-and-tutorials/