@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,700,900'); $mainFont: 'Montserrat', sans-serif; $primaryColor: #4A90E2; $secondColor:#0087AC; body{ background: #8FA6B4; font-family: $mainFont; } .button-parent{ max-width: 1100px; margin: auto; text-align: center; &--inner{ padding: 4em 1em; } } a{ text-decoration: none; font-weight: 500; position: relative; color: #4A4A4A; display: inline-block; } .button-item{ padding-bottom: 2em; } // button 1 .btn-1{ padding: 1em 3em; border: 3px solid $primaryColor; transition: all 300ms ease; box-shadow: 0px 4px 10px 2px rgba(black, 0.2); &:before{ position: absolute; content: ''; width: 0%; height: 100%; background: $primaryColor; top: 0; left: 50%; z-index: -1; transition: all 0ms ease; } &:hover{ color: white; box-shadow:none; &:before{ position: absolute; content: ''; width: 100%; height: 100%; background: $primaryColor; top: 0; left: 0%; z-index: -1; transition: all 300ms ease; } } } // button 2 .btn-2{ padding: 1em 3em; border: 3px solid $primaryColor; transition: all 300ms ease; box-shadow: 0px 4px 10px 2px rgba(black, 0.2); &:before{ position: absolute; content: ''; width: 0%; height: 100%; background: $primaryColor; top: 0; left: auto; right: 0; z-index: -1; transition: all 300ms ease; } &:hover{ color: white; box-shadow:none; &:before{ position: absolute; content: ''; width: 100%; height: 100%; background: $primaryColor; top: 0; left: 0; right: 0; z-index: -1; } } } // button 3 .btn-3{ padding: 1em 3em; border: 3px solid $primaryColor; transition: all 300ms ease; box-shadow: 0px 4px 10px 2px rgba(black, 0.2); span{ position: relative; padding: 0em 0.2em; &:before{ content: ''; position: absolute; bottom: 0; left: auto; right: 0; height: 50%; width: 0%; background: $primaryColor; z-index: -1; transition: all 300ms ease; } } &:hover{ color: white; box-shadow:none; span{ &:before{ content: ''; width: 100%; left: 0; right: 0; } } } } // button 4 .btn-4{ padding: 1em 3em; border: 3px solid $primaryColor; transition: all 300ms ease; box-shadow: 0px 4px 10px 2px rgba(black, 0.2); span{ position: relative; padding: 0em 0.2em; &:before{ content: ''; position: absolute; bottom: auto; top: 0; height: 0%; width: 100%; background: $primaryColor; z-index: -1; transition: all 300ms ease; } } &:hover{ color: white; box-shadow:none; span{ &:before{ content: ''; height: 100%; bottom: 0; top: auto; } } } } // button 5 .btn-5{ padding: 1em 3em; border: 3px solid $primaryColor; transition: all 300ms ease; box-shadow: 0px 4px 10px 2px rgba(black, 0.2); &:before{ content: ''; width: 0%; height: 2px; position: absolute; top: 10%; left: 10%; background: $primaryColor; transition: all 0ms ease; } &:after{ content: ''; width: 80%; height: 0px; position: absolute; top: 10%; left: 10%; background: $primaryColor; transition: all 0ms ease; z-index: -1; } &:hover{ color: white; box-shadow:none; &:before{ content: ''; width: 80%; height: 2px; position: absolute; top: 10%; left: 10%; background: $primaryColor; transition: all 300ms ease; } &:after{ content: ''; width: 80%; height: 80%; position: absolute; top: 10%; left: 10%; transition: all 300ms ease; transition-delay: 350ms; } } } // button 6 .btn-6{ padding: 1em 3em; border: 3px solid $primaryColor; transition: all 300ms ease; box-shadow: 0px 4px 10px 2px rgba(black, 0.2); &:before{ content: ''; height: 0%; width: 2px; position: absolute; top: 10%; left: 10%; background: $primaryColor; transition: all 0ms ease; } &:after{ content: ''; height: 80%; width: 0px; position: absolute; top: 10%; left: 10%; background: $primaryColor; transition: all 0ms ease; z-index: -1; } &:hover{ color: white; box-shadow:none; &:before{ content: ''; height: 80%; width: 2px; position: absolute; top: 10%; left: 10%; background: $primaryColor; transition: all 300ms ease; } &:after{ content: ''; height: 80%; width: 80%; position: absolute; top: 10%; left: 10%; transition: all 300ms ease; transition-delay: 350ms; } } }
