CODEWITHSUNDEEP
cssbuttonresponsive
Lays White
Lays White

Reputation: 3

Responsive buttons in css

I know that here is many answers about responsive buttons, but I didn't found any solution to solve my problem.

I hope you may help me!

Here I have 3 buttons. Help me please to make it responsive.

.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;}

Thank you!

Upvotes: 0

Views: 2528

Answers (2)

Lays White
Lays White

Reputation: 3

Here is the code which I was added!

@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;

    }


}

Upvotes: 0

DannyV
DannyV

Reputation: 220

When you say a responsive button I assume you're asking a button that looks good on mobile and desktop. In this case, you would use media queries to resize the button based on the type of device you're using. I also don't recommend you use !important at all ex)

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

    p {
        font-size: 16px;
    }


}

Upvotes: 1

Related Questions