-
-
Save AJLeonardi/022da34a62b29081aa9035e43ad61611 to your computer and use it in GitHub Desktop.
| .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> |
Hi
Thanks, works well
How can I change the color, to #64b5f6 blue lighten-2 for example ?
When I change the html class or the css you provided it works, but when i clic on the button or hover nothing happens
@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:
- update the
.btn-group>.btnand.btn-group>.btn:hoverwith the background-color set to your preference AND set!importanton the background color attributes in the.btn-inactiveclasses. (jsFiddle) - create two new classes for your active button
.btn-group>.btn-activeand.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!
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
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 =)
Works like a charm. Thanks!
Works like a charm. Thanks!
You're welcome!
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!
Heaviliy adapted from Bootstrap's css for btn-groups
It works similar to bootstrap: just wrap your links in a div which has class 'btn-group' and add the btn class to the links.
Instead of btn-primary and btn-secondary to highlight the "active state," you can just add the "btn-inactive" class to the buttons which aren't currently selected.
See it working on jsFiddle:
https://jsfiddle.net/AJLeonardi/2y70dj8h/4