Button effects

codespector.css

/**
 * Button effects
 */

@import url("https://fonts.googleapis.com/css?family=Raleway");* {  box-sizing: border-box;}body {  margin: 0;  padding: 0;  width: 100%;  height: 100vh;  display: flex;  justify-content: center;  align-items: center;  flex-direction: column;  font-family: Raleway;  background-color: #ecf0f1;}.copyright {  position: absolute;  bottom: 0;}.copyright a {  text-decoration: none;  color: #16a085;}.copyright a:hover {  text-decoration: underline;}.button {  position: relative;  padding: 1em 1.5em;  border: none;  background-color: transparent;  cursor: pointer;  outline: none;  font-size: 18px;  margin: 1em 0.8em;}.button.type1 {  color: #566473;}.button.type1.type1::after, .button.type1.type1::before {  content: "";  display: block;  position: absolute;  width: 20%;  height: 20%;  border: 2px solid;  transition: all 0.6s ease;  border-radius: 2px;}.button.type1.type1::after {  bottom: 0;  right: 0;  border-top-color: transparent;  border-left-color: transparent;  border-bottom-color: #566473;  border-right-color: #566473;}.button.type1.type1::before {  top: 0;  left: 0;  border-bottom-color: transparent;  border-right-color: transparent;  border-top-color: #566473;  border-left-color: #566473;}.button.type1.type1:hover:after, .button.type1.type1:hover:before {  width: 100%;  height: 100%;}.button.type2 {  color: #16a085;}.button.type2.type2:after, .button.type2.type2:before {  content: "";  display: block;  position: absolute;  top: 100%;  left: 0;  width: 100%;  height: 2px;  background-color: #16a085;  transition: all 0.3s ease;  transform: scale(0.85);}.button.type2.type2:hover:before {  top: 0;  transform: scale(1);}.button.type2.type2:hover:after {  transform: scale(1);}.button.type3 {  color: #435a6b;}.button.type3.type3::after, .button.type3.type3::before {  content: "";  display: block;  position: absolute;  width: 20%;  height: 20%;  border: 2px solid;  transition: all 0.6s ease;  border-radius: 2px;}.button.type3.type3::after {  bottom: 0;  right: 0;  border-top-color: transparent;  border-left-color: transparent;  border-bottom-color: #435a6b;  border-right-color: #435a6b;}.button.type3.type3::before {  top: 0;  left: 0;  border-bottom-color: transparent;  border-right-color: transparent;  border-top-color: #435a6b;  border-left-color: #435a6b;}.button.type3.type3:hover:after, .button.type3.type3:hover:before {  border-bottom-color: #435a6b;  border-right-color: #435a6b;  border-top-color: #435a6b;  border-left-color: #435a6b;  width: 100%;  height: 100%;}

codespector.html

<h1> Button effects </h1><div>  <button class="button type1">    Effect one  </button>  <button class="button type2">    Effect two  </button>    <button class="button type3">    Effect three  </button></div><p class="copyright"> By <a href="http://emanuelgdev.com.br">EmanuelG</a> </p>

codespector.js

// alert('Welcome to codespector!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","codespector_bootstrap":"","codespector_jquery":"","page":"all"}