Home Web Design Bootstrap Bootstrap Button Group With Popup and 3D Style | Buttons Group CSS

Bootstrap Button Group With Popup and 3D Style | Buttons Group CSS

September 13, 2019

5476

How we can create a button group using HTML CSS JavaScript and Bootstrap? Solution: See this Bootstrap Button Group With Popup and 3D Style, Buttons Group CSS.

Previously I have shared many types of button related program, but this is different because it’s a button’s group. Basically, it is a group or series of buttons together on a single line. We can use this type of group in many places, like pricing option or any other license-related option, etc.

Today you will learn to created Button group with normal, popup, and 3D effect. There are 3 sections and each section has a group of 4 buttons, the first one is normal with two color combination, second is with 3D effect, and the third one is with popup effect. Maybe the 3D example will not work properly, you have to give less width and height.

So, Today I am sharing Bootstrap Button Group With Popup and 3D Style. I have have used Bootstrap for creating the layout and some functions, because bootstrap is HTML CSS JS library and it has prebuilt functions and styles. And also there used jQuery for easy work and fewer codes. I think this program will be useful for you and you can use it on your website.

If you are thinking now how this button group actually is, then see the preview given below.

Preview Of Button’s Group CSS

See this video preview to getting an idea of how this group looks like.

https://webdevtrick.com/wp-content/uploads/button-group-css-bootstrap.mp4?_=1

Live Demo

Now you can see this visually, you also can see it live by pressing the button given above. If you like this, then get the source code of its.

Bootstrap Button Group With Popup and 3D Style Source Code

Before sharing source code, let’s talk about it. First Using HTML I have created the buttons group. For creating group, I have placed four buttons inside a div and put the div’s class name <div class="button-group"> As you know there I have used Bootstrap and this class name is prebuilt in Bootstrap, you just have to put this class name only.

As you can see in the preview, there are some icons and also these are placed using bootstrap. Basically, it has a component of icons called Glyphicons, using this you can place some important icons on your website. Now Using CSS I have placed all the element on the right place. Using CSS, I have managed all the styles like position, margin, padding, color, etc.

In JavaScript file which is powered by jQuery, First I have fetched the buttons group and managed their conditions. Basically, JS detect the click and put active class on the selected buttons. And in the 3D group, JS managed the side 3D element which also based on active and deactivates class names.

Left all other things you will understand after getting the codes, I can’t explain all in writing. For creating this program you have to create 3 files. First for HTML, second for CSS, and the third for JavaScript. Follow the steps to creating this without any error.

index.html

Create an HTML element named ‘index.html‘ and put these codes given below.

<!DOCTYPE html>
<!--Code By Webdevtrick (https://webdevtrick.com )-->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Button Groups | Webdevtrick.com</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="button-group" id="redB">
  <h3>Normal Red-Black<h3>
  <div class="button"> <span class="glyphicon glyphicon-headphones"></span> Music</div>
  <div class="button active"> <span class="glyphicon glyphicon-picture"></span> Photos</div>
  <div class="button"> <span class="glyphicon glyphicon-fire"></span> Trending</div>
  <div class="button"> <span class="glyphicon glyphicon-map-marker"></span> Location</div>
</div>

 <div class="button-group" id="threeD">
  <h3>3D Button Group<h3>
  <div class="button"> <span class="glyphicon glyphicon-headphones"></span> Music</div>
  <div class="button prev"> <span class="glyphicon glyphicon-picture"></span> Photos</div>
  <div class="button active"> <span class="glyphicon glyphicon-fire"></span> Trending</div>
  <div class="button next"> <span class="glyphicon glyphicon-map-marker"></span> Location</div>
</div>

<div class="button-group" id="popUp">
  <h3>Popup Button Group<h3>
  <div class="button active"> Music<span class="glyphicon glyphicon-headphones"></span> </div>
  <div class="button">  Photos<span class="glyphicon glyphicon-picture"></span></div>
  <div class="button"> Trending<span class="glyphicon glyphicon-fire"></span> </div>
  <div class="button">Location <span class="glyphicon glyphicon-map-marker"></span> </div>
</div>

<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script  src="function.js"></script>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Button Groups | Webdevtrick.com</title>

</head>

<body>

<h3>Normal Red-Black<h3>

<div class="button"> <span class="glyphicon glyphicon-headphones"></span> Music</div>

<div class="button active"> <span class="glyphicon glyphicon-picture"></span> Photos</div>

<div class="button"> <span class="glyphicon glyphicon-fire"></span> Trending</div>

<div class="button"> <span class="glyphicon glyphicon-map-marker"></span> Location</div>

</div>

<h3>3D Button Group<h3>

<div class="button"> <span class="glyphicon glyphicon-headphones"></span> Music</div>

<div class="button prev"> <span class="glyphicon glyphicon-picture"></span> Photos</div>

<div class="button active"> <span class="glyphicon glyphicon-fire"></span> Trending</div>

<div class="button next"> <span class="glyphicon glyphicon-map-marker"></span> Location</div>

</div>

<h3>Popup Button Group<h3>

<div class="button active"> Music<span class="glyphicon glyphicon-headphones"></span> </div>

<div class="button"> Photos<span class="glyphicon glyphicon-picture"></span></div>

<div class="button"> Trending<span class="glyphicon glyphicon-fire"></span> </div>

<div class="button">Location <span class="glyphicon glyphicon-map-marker"></span> </div>

</div>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

/* Code By Webdevtrick (https://webdevtrick.com ) */
* {
  margin: 0;
  padding: 0;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 100;
}
.button-group {
  margin: 100px auto;
  width: 600px;
  margin-bottom: 30px;
}
.button-group h3 {
  color: #999;
  text-align: center;
  font-size: 16px;
  margin-bottom: 10px;
}
.button-group#redB .button {
  background: linear-gradient(135deg, #292929, #191919);
  border: none;
  width: 120px;
  height: 120px;
  padding: 20px;
  display: inline-block;
  margin: -4px;
  color: #F2070B;
  font-size: 14px;
  text-align: left;
  text-shadow: 0 0 10px rgba(181, 26, 30, 0.4);
  box-shadow: 0px 10px 30px rgba(28, 28, 28, 0.9);
}
.button-group#redB .button span {
  text-align: center;
  margin: 20px 0 20px 0;
  display: block;
  color: #fff;
  font-size: 32px;
  text-shadow: none;
}
.button-group#redB .button:hover {
  background: linear-gradient(-45deg, #292929, #191919);
}
.button-group#redB .button.active {
  background: #B51A1E;
  color: #fff;
  box-shadow: inset 0px 0px 30px rgba(28, 28, 28, 0.9);
}
.button-group#threeD .button {
  background: linear-gradient(135deg, #39414E, #4C5363);
  border: none;
  width: 120px;
  height: 120px;
  padding: 20px;
  display: inline-block;
  margin: 0 -2px 30px -3px;
  color: #F89B72;
  font-size: 14px;
  box-shadow: 0px 2px 15px #323A45;
  position: relative;
}
.button-group#threeD .button span {
  text-align: center;
  margin: 20px 0 20px 0;
  display: block;
  color: #fff;
  text-shadow: 0 2px 30px #323A45;
  font-size: 32px;
}
.button-group#threeD .button:hover {
  background: linear-gradient(135deg, #4C5363, #39414E);
}
.button-group#threeD .button.active {
  font-size: 14px;
  text-shadow: 0 0 10px #fff;
  background: linear-gradient(135deg, #4C5363, #39414E);
  color: #fff;
  height: 100px;
  vertical-align: bottom;
}
.button-group#threeD .button.active span {
  text-shadow: 0 0 10px #fff;
  margin-top: 10px;
  font-size: 20px;
}
.button-group#threeD .button.next:before {
  content: '';
  position: absolute;
  z-index: 11;
  left: -25px;
  top: 0px;
  line-height: 90px;
  border-bottom: 20px solid #323A45;
  border-left: 25px solid transparent;
}
.button-group#threeD .button.next:after {
  content: '';
  position: absolute;
  z-index: 11;
  left: -25px;
  top: 20px;
  line-height: 90px;
  border-top: 100px solid #323A45;
  border-left: 25px solid transparent;
}
.button-group#threeD .button.prev:before {
  content: '';
  position: absolute;
  z-index: 11;
  left: 100%;
  top: 20px;
  line-height: 90px;
  border-top: 100px solid #323A45;
  border-right: 25px solid transparent;
}
.button-group#threeD .button.prev:after {
  content: '';
  position: absolute;
  z-index: 11;
  left: 100%;
  top: 0px;
  line-height: 90px;
  border-bottom: 20px solid #323A45;
  border-right: 25px solid transparent;
}
.button-group#popUp .button {
  background: #EBE9EA;
  border: none;
  width: 120px;
  height: 120px;
  padding: 20px;
  display: inline-block;
  margin: -2px;
  color: #ff5353;
  font-size: 16px;
  text-align: right;
}
.button-group#popUp .button span {
  text-align: center;
  margin: 20px 0 0 -30px;
  display: block;
  font-size: 54px;
  text-shadow: none;
}
.button-group#popUp .button:hover {
  background: #ff5353;
  color: #fff;
}
.button-group#popUp .button.active {
  text-shadow: 0 0 10px rgba(181, 26, 30, 0.4);
  background: #ff5353;
  color: #fff;
  transform: translate(10px, -10px);
  z-index: 100;
  box-shadow: -8px 8px 0px 2px rgba(28, 28, 28, 0.3);
}
@media (max-width:765px) {
  .button-group {
    width: 100%;
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

/* Code By Webdevtrick (https://webdevtrick.com ) */

* {

margin: 0;

padding: 0;

font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;

font-weight: 100;

}

.button-group {

margin: 100px auto;

width: 600px;

margin-bottom: 30px;

}

.button-group h3 {

color: #999;

text-align: center;

font-size: 16px;

margin-bottom: 10px;

}

.button-group#redB .button {

background: linear-gradient(135deg, #292929, #191919);

border: none;

width: 120px;

height: 120px;

padding: 20px;

display: inline-block;

margin: -4px;

color: #F2070B;

font-size: 14px;

text-align: left;

text-shadow: 0 0 10px rgba(181, 26, 30, 0.4);

box-shadow: 0px 10px 30px rgba(28, 28, 28, 0.9);

}

.button-group#redB .button span {

text-align: center;

margin: 20px 0 20px 0;

display: block;

color: #fff;

font-size: 32px;

text-shadow: none;

}

.button-group#redB .button:hover {

background: linear-gradient(-45deg, #292929, #191919);

}

.button-group#redB .button.active {

background: #B51A1E;

color: #fff;

box-shadow: inset 0px 0px 30px rgba(28, 28, 28, 0.9);

}

.button-group#threeD .button {

background: linear-gradient(135deg, #39414E, #4C5363);

border: none;

width: 120px;

height: 120px;

padding: 20px;

display: inline-block;

margin: 0 -2px 30px -3px;

color: #F89B72;

font-size: 14px;

box-shadow: 0px 2px 15px #323A45;

position: relative;

}

.button-group#threeD .button span {

text-align: center;

margin: 20px 0 20px 0;

display: block;

color: #fff;

text-shadow: 0 2px 30px #323A45;

font-size: 32px;

}

.button-group#threeD .button:hover {

background: linear-gradient(135deg, #4C5363, #39414E);

}

.button-group#threeD .button.active {

font-size: 14px;

text-shadow: 0 0 10px #fff;

background: linear-gradient(135deg, #4C5363, #39414E);

color: #fff;

height: 100px;

vertical-align: bottom;

}

.button-group#threeD .button.active span {

text-shadow: 0 0 10px #fff;

margin-top: 10px;

font-size: 20px;

}

.button-group#threeD .button.next:before {

content: '';

position: absolute;

z-index: 11;

left: -25px;

top: 0px;

line-height: 90px;

border-bottom: 20px solid #323A45;

border-left: 25px solid transparent;

}

.button-group#threeD .button.next:after {

content: '';

position: absolute;

z-index: 11;

left: -25px;

top: 20px;

line-height: 90px;

border-top: 100px solid #323A45;

border-left: 25px solid transparent;

}

.button-group#threeD .button.prev:before {

content: '';

position: absolute;

z-index: 11;

left: 100%;

top: 20px;

line-height: 90px;

border-top: 100px solid #323A45;

border-right: 25px solid transparent;

}

.button-group#threeD .button.prev:after {

content: '';

position: absolute;

z-index: 11;

left: 100%;

top: 0px;

line-height: 90px;

border-bottom: 20px solid #323A45;

border-right: 25px solid transparent;

}

.button-group#popUp .button {

background: #EBE9EA;

border: none;

width: 120px;

height: 120px;

padding: 20px;

display: inline-block;

margin: -2px;

color: #ff5353;

font-size: 16px;

text-align: right;

}

.button-group#popUp .button span {

text-align: center;

margin: 20px 0 0 -30px;

display: block;

font-size: 54px;

text-shadow: none;

}

.button-group#popUp .button:hover {

background: #ff5353;

color: #fff;

}

.button-group#popUp .button.active {

text-shadow: 0 0 10px rgba(181, 26, 30, 0.4);

background: #ff5353;

color: #fff;

transform: translate(10px, -10px);

z-index: 100;

box-shadow: -8px 8px 0px 2px rgba(28, 28, 28, 0.3);

}

@media (max-width:765px) {

.button-group {

width: 100%;

}

function.js

The final step, Create a JavaScript file named ‘function.js‘ and put the codes.

// Code By Webdevtrick (https://webdevtrick.com )
$(document).ready(function() {
  buttonClick('#redB');
  buttonClick('#popUp');
  buttonClickPN('#threeD')
})

function buttonClick(string) {
  $(string).find(".button").click(function() {
    if (!$(this).hasClass('active')) {
      $(string + ' .active').removeClass('active');
      $(this).addClass('active');
    }
  })
}

function buttonClickPN(string) {
  $(string).find(".button").click(function() {
    if (!$(this).hasClass('active')) {
      $(string + ' .active').removeClass('active');
      $(string + ' .prev').removeClass('prev');
      $(string + ' .next').removeClass('next');
      $(this).addClass('active');
      $(this).prev().addClass('prev');
      $(this).next().addClass('next');
    }
  })
}

// Code By Webdevtrick (https://webdevtrick.com )

$(document).ready(function() {

buttonClick('#redB');

buttonClick('#popUp');

buttonClickPN('#threeD')

})

function buttonClick(string) {

$(string).find(".button").click(function() {

if (!$(this).hasClass('active')) {

$(string + ' .active').removeClass('active');

$(this).addClass('active');

}

})

}

function buttonClickPN(string) {

$(string).find(".button").click(function() {

if (!$(this).hasClass('active')) {

$(string + ' .active').removeClass('active');

$(string + ' .prev').removeClass('prev');

$(string + ' .next').removeClass('next');

$(this).addClass('active');

$(this).prev().addClass('prev');

$(this).next().addClass('next');

}

})

}

That’s It. Now you have successfully created Bootstrap Button Group With Popup and 3D Style, Buttons Group CSS. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.