<center>
  <div style="width:1200px;">
  <div class="container">
    <div class="button1">
      <div class="button1-content">Follow us on twitter</div>
    </div>
  </div>
  <div class="container">
    <div class="button2">
      <div class="button2-content">facebook</div>
    </div>
  </div>
  <div class="container">
    <div class="button3">
      <div class="button3-content">Send</div>
    </div>
    <p>Click me!</p>
  </div>
  <div class="container">
    <div class="button4">
      <div class="button4-content">Delete</div>
    </div>
    <p>Click me!</p>
  </div>
  <div class="container">
    <div class="button5">
      <div class="button5-content">Clear Form</div>
    </div>
    <p>Click me!</p>
  </div>
  <div class="container">
    <div class="button1b">
      <div class="button1b-content">You are a superstar!</div>
    </div>
    <p>Click me!</p>
  </div>
  <div class="container">
    <div class="button2b">
      <div class="button2b-content">facebook</div>
    </div>
  </div>
  <div class="container">
  </div>
  <div class="container">
  </div>
  <div class="container">
  </div>
  <div class="container">
  </div>
  <div class="container">
    <div class="button2c">
      <div class="button2c-content">facebook</div>
    </div>
  </div>
  <div class="container">
    <div class="button6">
      <div class="button6-content">f</div>
    </div>
  </div>
  </div>
</center>

body {
  background-color: rgba(0, 70, 100, .3);
  -webkit-transform: translate3D(0,0,0);
  font-family:Helvetica;
  font-size:16px;
  font-weight:bold;
  color:#555555;
}

p {  
  text-shadow: -1px 1px rgba(255, 255, 255, 1), -2px 2px rgba(255, 255, 255, 1);
}

/*button1*/

.button1 {
  display:block;
  width:50px;
  height:50px;
  background: rgba(200, 100, 100, 1);
  border-radius:25px;
  border:2px solid rgba(200, 100, 100, 1);
  transition: all .5s;
  overflow:hidden;
}

.button1:hover {
  display:block;
  width:150px;
  height:50px;
  background: rgba(200, 100, 100, 1);
  border-radius:13px;
  border:2px solid rgba(200, 100, 100, 1);
  cursor:pointer;
  transition: all .5s;
  overflow:hidden;
}

.button1-content {
  font-family:Helvetica;
  font-size:12px;
  font-weight:normal;
  line-height:50px;
  color: rgba(255, 255, 255, 1);
  width:150px;
  position: relative;
  transition: all 1s;
  left:150px;
  height:55px;
}

.button1-content:before {
  content: 'twitter';
  position: absolute;
  right: 250px;
  background-color: rgba(255, 255, 255, 1);
  width:50px;
  height:50px;
  border-radius:25px;
  color: rgba(200, 100, 100, 1);
}

.button1:hover .button1-content {
  font-family:Helvetica;
  font-size:12px;
  font-weight:normal;
  line-height:50px;
  color: rgba(255, 255, 255, 1);
  width:150px;
  transition: all 1s;
  left:0px;
  background-color: rgba(200, 100, 100, 1);
  height:50px;
  border-radius:8px;
}

/*button1b*/

.button1b {
  display:block;
  width:50px;
  height:50px;
  background: rgba(255, 200, 0, 1);
  border-radius:25px;
  border:2px solid rgba(255, 200, 0, 1);
  transition: all .5s;
  overflow:hidden;
}

.button1b:hover {
  display:block;
  width:175px;
  height:50px;
  background: rgba(255, 200, 0, 1);
  border-radius:13px;
  border:2px solid rgba(255, 200, 0, 1);
  cursor:pointer;
  transition: all .5s;
  overflow:hidden;
  box-shadow: -1px 1px 0px 0px rgba(50, 50, 50, 1), -2px 2px 0px 0px rgba(50, 50, 50, 1), -2px 3px 0px 0px rgba(50, 50, 50, 1);
}

.button1b-content {
  font-family:Helvetica;
  font-size:15px;
  font-weight:bold;
  line-height:50px;
  color: rgba(255, 255, 255, 1);
  width:150px;
  position: relative;
  transition: all 1s;
  left:150px;
  height:55px;
}

.button1b-content:before {
  content: '★';
  position: absolute;
  right: 250px;
  background-color: rgba(255, 255, 255, 1);
  width:50px;
  height:50px;
  border-radius:25px;
  color: rgba(255, 200, 0, 1);
}

.button1b:hover .button1b-content {
  font-family:Helvetica;
  font-size:15px;
  font-weight:bold;
  line-height:50px;
  color: rgba(255, 255, 255, 1);
  width:150px;
  transition: all 1s;
  left:0px;
  background-color: rgba(255, 200, 0, 1);
  height:50px;
  border-radius:8px;
}

.button1b:active {
  display:block;
  width:175px;
  height:50px;
  background: rgba(255, 200, 0, 1);
  border-radius:13px;
  border:2px solid rgba(255, 200, 0, 1);
  cursor:pointer;
  overflow:hidden;
  box-shadow: -1px 1px 0px 0px rgba(50, 50, 50, 1);
  top:2px;
  right:2px;
  position:relative;
  transition: all 0s;
}

/*button2*/

.button2 {
  display:block;
  width:50px;
  height:50px;
  background: rgba(100, 100, 200, 1);
  border-radius:25px;
  border:2px solid rgba(100, 100, 200, 1);
  margin-left:0px;
  transition: all .8s;
  overflow:hidden;
  bottom:0px;
  position:relative;
}

.button2:hover {
  display:block;
  width:50px;
  height:50px;
  background: rgba(100, 100, 200, .1);
  border-radius:35px;
  border:7px solid rgba(100, 100, 200, .4);
  cursor:pointer;
  transition: all .3s;
  overflow:hidden;
  bottom:3px;
  position:relative;
}

.button2-content {
  font-family:Helvetica;
  font-size:10px;
  font-weight:normal;
  line-height:50px;
  color: rgba(255, 255, 255, 1);
  border-radius:25px;
  width:50px;
  position: relative;
  transition: all 1s;
  height:55px;
  bottom:0px;
}

.button2-content:before{
  content: 'f';
  position: absolute;
  background-color: rgba(255, 255, 255, 1);
  width:50px;
  height:50px;
  border-radius:25px;
  color: rgba(100, 100, 200, 1);
  top:50px;
  font-size:35px;
  font-weight:bold;
  right:0px;
}

.button2:hover .button2-content {
  font-family:Helvetica;
  font-size:10px;
  font-weight:normal;
  line-height:50px;
  color: rgba(255, 255, 255, 0);
  width:50px;
  transition: all .5s;
  background-color: rgba(100, 100, 200, 0);
  height:50px;
  bottom:50px;
}

/*button2b*/

.button2b {
  display:block;
  width:50px;
  height:50px;
  background: rgba(100, 100, 200, 1);
  border-radius:25px;
  border:2px solid rgba(100, 100, 200, 1);
  margin-left:0px;
  transition: all .8s;
  overflow:hidden;
  bottom:0px;
  position:relative;
}

.button2b:hover {
  display:block;
  width:50px;
  height:50px;
  background: rgba(100, 100, 200, .1);
  border-radius:35px;
  border:7px solid rgba(100, 100, 200, .4);
  cursor:pointer;
  transition: all .8s;
  overflow:hidden;
  bottom:3px;
  position:relative;
  transform: rotate(90deg);
}

.button2b-content {
  font-family:Helvetica;
  font-size:10px;
  font-weight:normal;
  line-height:50px;
  color: rgba(255, 255, 255, 1);
  border-radius:25px;
  width:50px;
  position: relative;
  transition: all 1s;
  height:55px;
  bottom:0px;
}

.button2b-content:before{
  content: 'f';
  position: absolute;
  background-color: rgba(255, 255, 255, 1);
  width:50px;
  height:50px;
  border-radius:25px;
  color: rgba(100, 100, 200, 1);
  top:50px;
  font-size:35px;
  font-weight:bold;
  right:0px;
  transform:rotate(-90deg)
}

.button2b:hover .button2b-content {
  font-family:Helvetica;
  font-size:10px;
  font-weight:normal;
  line-height:50px;
  color: rgba(255, 255, 255, 0);
  width:50px;
  transition: all .5s;
  background-color: rgba(100, 100, 200, 0);
  height:50px;
  bottom:50px;
}

/*button2c*/

.button2c {
  display:block;
  width:50px;
  height:50px;
  background: rgba(100, 100, 200, 1);
  border-radius:25px;
  border:2px solid rgba(100, 100, 200, 1);
  margin-left:0px;
  transition: all .1s;
  overflow:hidden;
  bottom:0px;
  position:relative;
}

.button2c:hover {
  display:block;
  width:60px;
  height:60px;
  background: rgba(100, 100, 200, 0);
  border-radius:35px;
  border:7px solid rgba(100, 100, 200, 0);
  cursor:pointer;
  transition: all .1s;
  overflow:hidden;
  bottom:13px;
  position:relative;
  /*transform: rotate(90deg);*/
}

.button2c-content {
  font-family:Helvetica;
  font-size:10px;
  font-weight:normal;
  line-height:50px;
  color: rgba(255, 255, 255, 1);
  border-radius:25px;
  width:50px;
  position: relative;
  transition: all .3s;
  height:55px;
  bottom:0px;
}

.button2c-content:before{
  content: 'f';
  position: absolute;
  background-color: rgba(255, 255, 255, 1);
  width:50px;
  height:50px;
  border-radius:35px;
  color: rgba(100, 100, 200, 1);
  top:55px;
  font-size:35px;
  font-weight:bold;
  right:0px;
  /*transform:rotate(-90deg)*/
}

.button2c:hover .button2c-content {
  font-family:Helvetica;
  font-size:10px;
  font-weight:normal;
  line-height:50px;
  color: rgba(255, 255, 255, 0);
  width:50px;
  /*transition: all .3s;*/
  background-color: rgba(100, 100, 200, 0);
  height:50px;
  bottom:50px;
}

/*Button3*/

.button3 {
  display: block;
  background-color: rgba(10, 180, 200, 1);
  width: 75px;
  height: 50px;
  border: 2px dotted rgba(255, 255, 255, 1);
  border-radius:10px;
  overflow:hidden;
  transition: all .5s;
}

.button3:hover {
  width:50px;
  background-color: rgba(255, 255, 255, 1);
  border: 2px dotted rgba(10, 180, 200, 1);
  transform:rotate(-90deg);
  cursor: pointer;
  transition: all .5s;
}

.button3-content {
  display:block;
  position:relative;
  width:75px;
  height:50px;
  font-family: arial;
  color: rgba(255, 255, 255, 1);
  font-weight:bold;
  font-size: 14px;
  line-height:45px;
  white-space:none;
  left:0px;
  transition: all .5s;
}

.button3:hover .button3-content {
  left:-103px;
  transition: all .5s;
}

.button3-content:after {
  position: absolute;
  width:75px;
  height:50px;
  top: -1px;
  left:93px;
  content: '(:';
  font-size:45px;
  color: rgba(10, 180, 200, 1);
}

.button3:active .button3-content:after {
  content:'♥';
  transform: rotate(90deg);
  top: 0px;
}

/*button4*/

.button4 {
  display: block;
  background-color: rgba(200, 50, 0, 1);
  width: 75px;
  height: 50px;
  border: 2px dotted rgba(255, 255, 255, 1);
  border-radius:10px;
  overflow:hidden;
  transition: all .5s;
}

.button4:hover {
  width:50px;
  background-color: rgba(255, 255, 255, 1);
  border: 2px dotted rgba(200, 50, 0, 1);
  transform:rotate(90deg);
  cursor: pointer;
  transition: all .5s;
}

.button4-content {
  display:block;
  position:relative;
  width:75px;
  height:50px;
  font-family: arial;
  color: rgba(255, 255, 255, 1);
  font-weight:bold;
  font-size: 14px;
  line-height:45px;
  white-space:none;
  left:0px;
  transition: all .5s;
}

.button4:hover .button4-content {
  left:-103px;
  transition: all .5s;
}

.button4:active .button4-content:after {
  content:':o';
}

.button4-content:after {
  position: absolute;
  width:75px;
  height:50px;
  top: -1px;
  left:90px;
  content: ':(';
  font-size:45px;
  color: rgba(200, 50, 0, 1);
}

/*Button5*/

.button5 {
  display: block;
  background-color: rgba(90, 110, 90, 1);
  width: 100px;
  height: 50px;
  border: 2px dotted rgba(255, 255, 255, 1);
  border-radius:10px;
  overflow:hidden;
  transition: all .5s;
}

.button5:hover {
  width:50px;
  background-color: rgba(255, 255, 255, 1);
  border: 2px dotted rgba(90, 110, 90, 1);
  transform:rotate(90deg);
  cursor: pointer;
  transition: all .5s;
}

.button5-content {
  display:block;
  position:relative;
  width:100px;
  height:50px;
  font-family: arial;
  color: rgba(255, 255, 255, 1);
  font-weight:bold;
  font-size: 14px;
  line-height:45px;
  white-space:none;
  left:0px;
  transition: all .5s;
}

.button5:hover .button5-content {
  left:-103px;
  transition: all .5s;
}

.button5:active .button5-content:after {
  content:'*';
  top:12px;
}

.button5-content:after {
  position: absolute;
  width:75px;
  height:50px;
  top: 1px;
  left:90px;
  content: ':/';
  font-size:45px;
  color: rgba(90, 110, 90, 1);
}

/*button6*/

.button6 {
  width:50px;
  height:50px;
  background-color: rgba(0, 200, 175, 1);
  box-shadow: 
    1px 1px 0 0 rgba(255, 255, 255, 1),
    2px 2px 0 0 rgba(255, 255, 255, 1),
    3px 3px 0 0 rgba(255, 255, 255, 1),
    4px 4px 0 0 rgba(255, 255, 255, 1),
    5px 5px 0 0 rgba(255, 255, 255, 1),
    6px 6px 0 0 rgba(255, 255, 255, 1);
   
  overflow:hidden;
  transition: all .8s;
}

.button6:hover {
  background-color: rgba(0, 175, 150, 1);
  cursor:pointer;
}

.button6:hover .button6-content {
  top:-50px;
  transition: all .5s;
}

.button6-content {
  width:50px;
  height:50px;
  color: #ffffff;
  font-size:40px;
  margin-left:0px;
  position:relative;
  display:block;
  transition: all .5s;

}

.button6-content:after {
  content:'f';
  position:absolute;
  top:50px;
  background-color: rgba(200, 200, 200, 1);
  width:50px;
  height:50px;
  display:block;
  color: rgba(0, 200, 175, 1);
  transition: all .8s;
}

.button6:hover .button6-content:after {
  background-color:rgba(255, 255, 255, 1);
  transition: all .5s;
}

/*Containers*/

.container {
  width:200px;
  height:75px;
  margin:15px;
  float:left;
  vertical-align:middle;
}