- <div class="center">
- <div class="btn from-top">From Top</div>
- <div class="btn from-left">From Left</div>
- <div class="btn from-right">From Right</div>
- <div class="btn from-middle">From Middle</div>
- <div class="btn from-bottom">From Bottom</div>
- </div>
- .btn {
- position: relative;
- padding: 1.4rem 2.2rem;
- padding-right: 1.2rem;
- font-size: 1.2rem;
- text-align:center;
- color: var(--inv);
- letter-spacing: 0.2rem;
- text-transform: uppercase;
- -webkit-transition: all 600ms cubic-bezier(0.77, 0, 0.175, 1);
- transition: all 600ms cubic-bezier(0.77, 0, 0.175, 1);
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- }
- .btn:before, .btn:after {
- content: '';
- position: absolute;
- -webkit-transition: inherit;
- transition: inherit;
- z-index: -1;
- }
- .btn:hover {
- color: var(--def);
- -webkit-transition-delay: .6s;
- transition-delay: .6s;
- }
- .btn:hover:before {
- -webkit-transition-delay: 0s;
- transition-delay: 0s;
- }
- .btn:hover:after {
- background: var(--inv);
- -webkit-transition-delay: .4s;
- transition-delay: .4s;
- }
- .from-top:before,
- .from-top:after {
- left: 0;
- height: 0;
- width: 100%;
- }
- .from-top:before {
- bottom: 0;
- border: 1px solid #69f;
- border-top: 0;
- border-bottom: 0;
- }
- .from-top:after {
- top: 0;
- height: 0;
- }
- .from-top:hover:before,
- .from-top:hover:after {
- height: 100%;
- }