<div class="wrapper"> <p class="holder"> <a href="#" class="anim_btn effektA">Эффект A</a> <a href="#" class="anim_btn effektB">Эффект B</a> <a href="#" class="anim_btn effektC">Эффект C</a> <a href="#" class="anim_btn effektD">Эффект D</a> </p> </div>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300&subset=latin,cyrillic); html, body, .wrapper { height: 100%; } body { background-image: linear-gradient(-123deg, #2d363d 0%, #677274 20%, #7a8485 28%, #9d9c98 61%, #c3b5a8 100%); font-family: 'Open Sans', sans-serif; } .wrapper { background-image: url(https://db.tt/NKFzzyVA); width: 100%; } .holder { position: absolute; top: 50%; height: 300px; width: 100%; margin-top: -170px; } a.anim_btn:link, a.anim_btn:visited { position: relative; display: block; max-width: 180px; width:100%; margin: 30px auto 0; padding: 14px 15px; border: 1px solid #fff; background: rgba(255, 255, 255, 0.2); color: #fff; text-align: center; text-decoration: none; text-transform: uppercase; overflow: hidden; letter-spacing: .08em; text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } a.anim_btn:link:after, a.anim_btn:visited:after { content: ""; position: absolute; background: none repeat scroll 0 0 #fff; height: 0%; left: 50%; top: 50%; width: 100%; z-index: -1; -webkit-transition: all .3s ease 0s; -moz-transition: all .3s ease 0s; -o-transition: all .3s ease 0s; transition: all .3s ease 0s; } a.anim_btn:link:hover, a.anim_btn:visited:hover { color: #333; text-shadow: none; } a.anim_btn:link:hover:after, a.anim_btn:visited:hover:after { height: 420%; } a.anim_btn.effektA:after { -moz-transform: translateX(-50%) translateY(-50%) rotate(-45deg); -ms-transform: translateX(-50%) translateY(-50%) rotate(-45deg); -webkit-transform: translateX(-50%) translateY(-50%) rotate(-45deg); transform: translateX(-50%) translateY(-50%) rotate(-45deg); } a.anim_btn.effektB:after { -moz-transform: translateX(-50%) translateY(-50%) rotate(45deg); -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg); -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg); transform: translateX(-50%) translateY(-50%) rotate(45deg); } a.anim_btn.effektC:after { opacity: .5; -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } a.anim_btn.effektC:hover:after { height: 140%; opacity: 1; } a.anim_btn.effektD:after { width: 0%; border-radius: 50%; opacity: .5; -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } a.anim_btn.effektD:hover:after { height: 450%; width: 110%; opacity: 1; }