A Pen by Agusti BR

Thumbnail
This awesome code was written by agustibr, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright agustibr ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Agusti BR</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="filtre">
  <div class="panel panel-default group-filter">
		    <div class="panel-heading" role="tab" id="headingOne">
		      <h4 class="panel-title"  id="mitest">
		        <a role="button" id="mia" class=" collapsed plus-col" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
							Categoria
							
              <div class="plus-button" id="btn-plus"></div>
		        </a>
		      </h4>
		    </div>
		    <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
		      <div class="panel-body">
						<ul class="list-inline list-unstyled">
							<li class=" "> <a href="/ca/projectes/categories/category-ca">category ca</a></li>
						</ul>
					</div>
		    </div>
		  </div>
  </div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/agustibr/a-pen-by-agusti-br-ZeJKvM */
body {
  padding: 15px;
}

.filtre {
  background: #f2f2f2;
  width: 100%;
  height: 60px;
  position: absolute;
  z-index: 99;
  left: 50%;
}
.filtre .filter-groups {
  height: 60px;
  float: right;
}
.filtre .panel .panel-heading .panel-title .plus-button {
  position: relative;
  width: 14px;
  height: 14px;
  float: right;
  margin: 15px;
  /* Vertical line */
  /* horizontal line */
}
.filtre .panel .panel-heading .panel-title .plus-button:before, .filtre .panel .panel-heading .panel-title .plus-button:after {
  content: "";
  position: absolute;
  background-color: red;
  transition: -webkit-transform 0.25s ease-out;
  transition: transform 0.25s ease-out;
  transition: transform 0.25s ease-out, -webkit-transform 0.25s ease-out;
}
.filtre .panel .panel-heading .panel-title .plus-button:before {
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  margin-left: -1px;
}
.filtre .panel .panel-heading .panel-title .plus-button:after {
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  margin-top: -1px;
}
.filtre .panel .panel-heading a {
  display: block;
  padding-left: 15px;
  color: black;
  text-decoration: none;
}
.filtre .panel .panel-heading a:hover {
  text-decoration: none;
}
.filtre .panel .panel-body {
  padding-bottom: 0px;
}
.filtre .panel ul {
  margin-left: 0px;
}
.filtre .panel ul li {
  padding-left: 15px;
  display: block;
}
.filtre .panel ul li a {
  color: black;
}

#mitest:hover #mia {
  color: red;
}
#mitest:hover #mia #bt-plus {
  background-color: pink;
}
#mitest:hover #mia #bt-plus:before {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  background-color: green;
}
#mitest:hover #mia #bt-plus:after {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  background-color: green;
}

Comments