Skip to content

Instantly share code, notes, and snippets.

@AJLeonardi
Created March 20, 2018 16:52
Show Gist options
  • Save AJLeonardi/022da34a62b29081aa9035e43ad61611 to your computer and use it in GitHub Desktop.
Save AJLeonardi/022da34a62b29081aa9035e43ad61611 to your computer and use it in GitHub Desktop.
Simple Button Group for Materialize
.btn-group {
position: relative;
display: -ms-inline-flexbox;
display: inline-flex;
vertical-align: middle;
}
.btn-group>.btn:first-child:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.btn-group>.btn:not(:first-child):not(:last-child) {
border-radius: 0;
}
.btn-group>.btn:last-child:not(:first-child),
.btn-group>.dropdown-toggle:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.btn-group>.btn-inactive {
background-color: #607d8b;
}
.btn-group>.btn {
-webkit-box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0), 0 0px 0px 0px rgba(0, 0, 0, 0), 0 0px 0px 0 rgba(0, 0, 0, 0);
box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0), 0 0px 0px 0px rgba(0, 0, 0, 0), 0 0px 0px 0 rgba(0, 0, 0, 0);
}
.btn-group>.btn-inactive:hover {
background-color: #728F9D;
}
.btn-group>.btn:hover {
-webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.4/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.4/js/materialize.min.js"></script>
<div style='padding:5px'>
<div class="btn-group" role="group">
<a class="btn btn-inactive" href="#">A</a><a class="btn" href="#">B</a><a class="btn btn-inactive" href="#">C</a>
</div>
</div>
@AJLeonardi
Copy link
Author

AJLeonardi commented Apr 12, 2020

@klopstock-dviz thanks!

Would you like to change your inactive or active button? Right now the active button takes the default from materialize. The inactive buttons' background color is set in the .btn-group>.btn-inactive and .btn-group>.btn-inactive:hover classes. To override the in-active color, you edit these classes.

To update the active button you can do one of two things:

  1. update the .btn-group>.btn and .btn-group>.btn:hover with the background-color set to your preference AND set !important on the background color attributes in the .btn-inactive classes. (jsFiddle)
  2. create two new classes for your active button .btn-group>.btn-active and .btn-group>.btn-active:hover

With option 1 you'll need to make sure you don't unexpectedly change other elements using the .btn class. With option 2 you'll need to make sure .btn-active is added to the appropriate elements

Hope that helps!

@klopstock-dviz
Copy link

Hi AJLeonardi
Thank you for your reply
It technically works as expected, but it seems the material design is lost, I find my self with flat buttons
Perhaps I shoud try to dive into materialize css spec, or drive the colors with JS

Best regards

@AJLeonardi
Copy link
Author

Sorry I couldn't be more help, @klopstock-dviz. Do you have a screen shot or a jsfiddle that shows what you mean? In any case, if you figure out a solution to your issue, please post here =)

@proofrock
Copy link

Works like a charm. Thanks!

@AJLeonardi
Copy link
Author

Works like a charm. Thanks!

You're welcome!

@klopstock-dviz
Copy link

klopstock-dviz commented Aug 21, 2021 via email

@AJLeonardi
Copy link
Author

Sorry Didn t saw your mailsI found mysefl happy with regular buttons, don t need the grouped buttons feature anymore

No worries! Glad things are working how you like!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment