Adding a Minimize and Close Button using CSS

I have created a popup window using css and I need to add to this popup window a minimize (-) and close(x) button.  Also I will need some help on how to make these work.  Anyway here is the CSS.  The min and close buttons would need to go in the title area.  Thanks in advance for your help.

.ChatBottom1Wrap  .ChatBottom1Popup {
  float: left;
  background-color: #ffffff;
  width: 277px;
  border: 1px solid #c1c1c1;
  position: fixed;
  bottom: 0;
  right: 30px;
  z-index: 1000;
  min-height: 300px;
  <!--margin: 0 -200px 0 -160px;-->
  -webkit-box-shadow: 0px 0px 13px 0px rgba(0,0,0,0.3);
  -moz-box-shadow: 0px 0px 13px 0px rgba(0,0,0,0.3);
  box-shadow: 0px 0px 13px 0px rgba(0,0,0,0.3);
  display: none;
}


.ChatBottom1Wrap .ChatBottom1Popup .ChatBottom1Title {
  float: none;
  background: #22BC1A;
  width: auto;
  text-align: left;
  padding: 20px;
  font-size: 16px;
  font-weight: bold;
  line-height: 16px;
  color: #252525;

  -webkit-border-bottom-right-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -moz-border-radius-bottomright: 5px;
  -moz-border-radius-bottomleft: 5px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}
sherbug1015Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Mikkel SandbergFront End DeveloperCommented:
Hi sherbug1015,
To add the buttons themselves, you can do this using the :before and :after pseudo selectors.
The advantage of using this is that it can all be done using CSS. To do this, simply add a CSS rule that looks something like this:
.ChatBottom1Wrap  .ChatBottom1Popup:before {
  content: "[insert symbol here]";
  // More styles here. You may want to absolutely position it within the parent
  // container. To do this, use position: relative; on the parent and then apply
  // position: absolute; to this one. Then you can position with left, right, etc.
}

Open in new window

Then you can use JavaScript to handle performing the actions.
Let me know if you have any more questions :)
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.