CSS中的ratio按鈕是一種常用的響應式設計工具，其可以在不同的屏幕尺寸下自動調整按鈕的大小和形狀，從而保證網站的視覺效果和用戶體驗。在實際使用過程中，我們可以通過定義不同的css class來控制ratio按鈕的樣式和布局。

.btn {
display: inline-block;
background-color: #0072c6;
color: #fff;
border-radius: 4px;
padding: 8px 16px;
font-size: 14px;
}
/*定義不同屏幕尺寸下的按鈕大小和形狀*/
@media only screen and (max-width: 767px) {
.btn {
font-size: 12px;
padding: 6px 12px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.btn {
font-size: 14px;
padding: 8px 14px;
}
}
@media only screen and (min-width: 992px) {
.btn {
font-size: 16px;
padding: 10px 18px;
}
}

上述代碼定義了一個.btn class，并在不同屏幕尺寸下通過media query控制按鈕的樣式。當屏幕寬度小于768px時，按鈕字體大小為12px，上下padding為6px和12px；當屏幕寬度在768px和991px之間時，按鈕字體大小為14px，上下padding為8px和14px；當屏幕寬度大于991px時，按鈕字體大小為16px，上下padding為10px和18px。

使用ratio按鈕可以幫助我們實現響應式設計，同時更好地適配不同的設備。在實際使用中，我們可以根據實際需要靈活定義按鈕的樣式，并通過media query來控制不同屏幕尺寸下的表現。