使用CSS製作按鈕收縮

Question

我有一個按鈕，除了視覺方面外，我想給按鈕的外觀，我想一直縮小按鈕1px，並保持其位置。

我已經有很多人在這，但似乎無法摸清楚。

任何幫助？

Answer 1

在這裏，我做了一個按鈕，這給按效果，以及它由像素縮小沒有移動。

My Fiddle

HTML：

<input type="button" class="demo" value="Press Me" />​ 

CSS：

.demo { 
    background: #f5f5f5; /* Old browsers */ 
    background: -moz-linear-gradient(top, #f5f5f5 0%, #dddddd 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(100%,#dddddd)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #f5f5f5 0%,#dddddd 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #f5f5f5 0%,#dddddd 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #f5f5f5 0%,#dddddd 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, #f5f5f5 0%,#dddddd 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#dddddd',GradientType=0); /* IE6-9 */ 
    border: 1px solid #dddddd; 
    padding: 5px; 
    font-size: 18px; 
    margin: 20px; 
    cursor: pointer; 
} 

.demo:active { 
    background: #dddddd; /* Old browsers */ 
    background: -moz-linear-gradient(top, #dddddd 0%, #f5f5f5 99%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dddddd), color-stop(99%,#f5f5f5)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #dddddd 0%,#f5f5f5 99%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #dddddd 0%,#f5f5f5 99%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #dddddd 0%,#f5f5f5 99%); /* IE10+ */ 
    background: linear-gradient(to bottom, #dddddd 0%,#f5f5f5 99%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dddddd', endColorstr='#f5f5f5',GradientType=0); /* IE6-9 */ 
    border: 1px solid transparent; 
} 

Answer 2

我認爲對於 「壓」 的效果，你可能想改變填充，而不是尺寸！

像這樣：

.MyButton { 
    margin:10px 10px;  
    line-height:14px; 
    font-size:14px; 
    text-align:center; 
    padding:3px 5px; 
} 

.MyButton:active { 
    padding:3px 4px 3px 6px; 
} 

隨着jsfiddle這裏。我認爲改變填充看起來比調整按鈕更好，更不用說如果你調整按鈕的大小，你也可以改變它周圍的元素的位置，這在頁面上看起來很奇怪。