How can i place 3 button horizontally and vertically aligned

Question

I want these 3 buttons to be vertically and horizontally aligned but when I try to align them, the last button is falling down and I don't know why. This is the original code without alignment, some one can help me?

@import 'https://fonts.googleapis.com/css?family=Comfortaa:300,400,700&subset=cyrillic,cyrillic-ext,latin-ext';

body {
  background: url(https://wallpaperscraft.com/image/black_background_pattern_light_texture_55291_1920x1080.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
button {
  color:#454545;
  width: 200px;
  background:transparent;
  border-width:2px;
  border-style: solid;
  border-color: #454545;
  position:relative;
  margin:1em;
  display:inline-block;
  padding:0.5em 1em;
  transition:all 0.3s ease-in-out;
  text-align:center;
  font-family:comfortaa;
  font-weight:bold
}

button:before, button:after{
  content:'';
  display:block;
  position:absolute;
  border-color:#454545;
  box-sizing:border-box;
  border-style:solid;
  width:1em;height:1em;
  transition:all 0.3s ease-in-out
}

button:before {
  top:-6px;left:-6px;
  border-width:2px 0 0 2px;
  z-index:5;
}

button:after {
  bottom:-6px;
  right:-6px;
  border-width:0 2px 2px 0;
}

button:hover:before, button:hover:after {
  width:calc(100% + 12px);
  height:calc(100% + 12px);
  border-color:#fff
}

button:hover {
  color:#353535;
  background-color:#fff;
  border-color:#fff
}

.pannello {
  max-width:960px;
  text-align:center;
  position:relative;
  margin:auto;
}


.rosso button {
  color:#ff0c0c;
  border-color:#ff0c0c
}

.rosso button:before, .rosso button:after  {
  border-color:#ff0c0c
}

.rosso button:hover:before, .rosso button:hover:after {
  border-color:#ff0c0c;
}

.rosso button:hover {
  color:#fff;
  background-color:#ff0c0c;
  border-color:#ff0c0c;
}

.rosso .pannello {
  max-width:960px;
  text-align:center;
  position:relative;
  margin:auto;
}

.bianco button {
  color:#e8e8e8;
  border-color:#e8e8e8
}

.bianco button:before, .bianco button:after  {
  border-color:#e8e8e8
}

.bianco button:hover:before, .bianco button:hover:after {
  border-color:#e8e8e8;
}

.bianco button:hover {
  color:#000;
  background-color:#e8e8e8;
  border-color:#e8e8e8;
}

.bianco .pannello {
  max-width:960px;
  text-align:center;
  position:relative;
  margin:auto;
}

.verde button {
  color:#e8e8e8;
  border-color:#e8e8e8
}

.verde button:before, .bianco button:after  {
  border-color:#e8e8e8
}

.verde button:hover:before, .bianco button:hover:after {
  border-color:#e8e8e8;
}

.verde button:hover {
  color:#000;
  background-color:#e8e8e8;
  border-color:#e8e8e8;
}

.verde .pannello {
  max-width:960px;
  text-align:center;
  position:relative;
  margin:auto;
}

Thanks!

PS: If you can post the fiddle

How can i place 3 button horizontally and vertically aligned

2 Answers