Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- .container {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
- align-item: center;
- display: flex;
- }
- .btn-block {
- -webkit-justify-content: space-around;
- -ms-flex-pack: distribute;
- justify-content: space-around;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- width: 30%;
- padding-top: 30px;
- }
- .btn {
- background-color: transparent;
- -webkit-transition: all 0.2s ease-out;
- -o-transition: all 0.2s ease-out;
- transition: all 0.2s ease-out;
- font-family: arial, monospace;
- border: 1px solid #00aaff;
- position: relative;
- padding: 10px 15px;
- color: #00aaff;
- cursor: pointer;
- overflow: hidden;
- display: block;
- font-size: 14px;
- width: auto;
- text-decoration: none;
- font-weight: 600;
- border-radius: 3px;
- }
- .btn::before,
- .btn::after {
- -webkit-transition: all 0.2s ease-out;
- -o-transition: all 0.2s ease-out;
- transition: all 0.2s ease-out;
- position: absolute;
- background-color: #46c3ff;
- width: 100%;
- height: 100%;
- left: -100%;
- opacity: 0.5;
- top: 0;
- z-index: -1;
- content: '';
- }
- .btn::after {
- -webkit-transition-delay: 0.2s ease-out;
- -o-transition-delay: 0.2s ease-out;
- transition-delay: 0.2s ease-out;
- opacity: 1;
- }
- .btn:hover::before,
- .btn:hover::after {
- -webkit-transition: all 0.2s ease-out;
- -o-transition: all 0.2s ease-out;
- transition: all 0.2s ease-out;
- left: 0;
- }
- .btn:hover {
- color: #ffffff;
- }
- .btn:active {
- background-color: #0096e1;
- color: #ffffff;
- }
Add Comment
Please, Sign In to add comment