在css中的响应按钮

Question

我知道这里有许多关于响应式按钮的答案，但我找不到任何解决方案来解决我的问题。

我希望你能帮助我！

这里我有3个按钮。请帮助我做出回应。

.btn{list-style:none;text-align:center;margin:10px!important;padding:10px!important;font-size:14px;clear:both;display:inline-block;text-decoration:none!important;color:#FFF!important;}
.btn ul {margin:0;padding:0}
.btn li{display:inline;margin:30px;padding:0;list-style:none;}
.icosite,.whitepaperlink,.watchyt{padding:12px 15px!important;color:#fff!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;opacity:.95;border:0;transition:all .2s ease-out}
.icosite {background-color:#6829b7; -moz-border-radius: 10px;
-webkit-border-radius: 10px;}
.whitepaperlink {background-color:#606060; -moz-border-radius: 10px;
-webkit-border-radius: 10px;}
.icosite:hover {background-color:#29b765;color:#fff; opacity:1; -moz-border-radius: 20px;
-webkit-border-radius: 20px;}
.whitepaperlink:hover {background-color:#29b765;color:#fff; opacity:1; -moz-border-radius: 20px;
-webkit-border-radius: 20px;}
.icosite:before {content:'\f064';font-size: 1.5em;display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:18px;font-family:fontawesome;transition:all 0.5s ease-out;}
.whitepaperlink:before {content:'\f1c1';font-size: 1.5em;display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:18px;font-family:fontawesome;transition:all 0.5s ease-out;}
.watchyt,.whitepaperlink,.icosite{padding:12px 15px!important;color:#fff!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;opacity:.95;border:0;transition:all .2s ease-out}
.watchyt {background-color:#ff0000; -moz-border-radius: 10px;
-webkit-border-radius: 10px;}
.watchyt:hover {background-color:#29b765;color:#fff; opacity:1; -moz-border-radius: 20px;
-webkit-border-radius: 20px;}
.watchyt:before {content:'\f16a';font-size: 1.5em;display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:18px;font-family:fontawesome;transition:all 0.5s ease-out;}

谢谢！

Answer 1

当你说一个响应式按钮时，我假设你要求一个在手机和桌面上看起来不错的按钮。在这种情况下，您将使用媒体查询根据您正在使用的设备类型调整按钮的大小。我也不建议你使用！重要的是前者）

@media screen and (max-width: 768px) {

    p {
        font-size: 16px;
    }


}

Answer 2

以下是我添加的代码！

@media screen and (max-width: 1200px) {

    .btnpost,.icosite,.whitepaperlink,.watchyt {
display: inline-block;
vertical-align: bottom;
margin: auto;
display:flex;
justify-content:center;
align-items:center;

    }


}