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来控制不同屏幕尺寸下的表现。