Стильные кнопки с эффектом при наведении на CSS3
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
@import url(http://weloveiconfonts.com/api/?family=fontawesome); /* fontawesome */ [class*="fontawesome-"]:before { font-family: 'FontAwesome', sans-serif; } .btn { position: relative; top: 50%; transform: translateY(-50%); box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1); margin: 0 8px; } .btn { border-radius: 4px; border: 2px solid #fff; color: #fff; display: inline-block; overflow: hidden; padding: 24px 60px 24px 16px; position: relative; text-decoration: none; line-height: 1; } .btn span { font-size: 1em; padding: 0 26px; position: relative; right: 0; transition: right 300ms ease; } .btn .icon { border-left: 1px solid rgba(255, 255, 255, 0.3); bottom: 10px; display: inline-block; line-height: 42px; position: absolute; right: 0; text-align: center; top: 10px; transition: all 300ms ease; width: 58px; } .btn:after { content: ''; position: absolute; top: 0; bottom: 0; right: 0; left: 0; background-color: #fff; opacity: 0; transition: opacity 300ms ease; } .btn:hover span { right: 100%; } .btn:hover .icon { border-left: 0; font-size: 1.8em; width: 100%; } .btn:hover:after { opacity: .2; } |
|
1 2 3 4 5 6 7 8 |
<a href="#" class="btn"> <span>Перейти к событию</span> <div class="icon"><b class="fontawesome-arrow-right" aria-hidden="true"></b></div> </a> <a href="#" class="btn btn-remove"> <span>Удалить</span> <div class="icon"><b class="fontawesome-remove" aria-hidden="true"></b></div> </a> |
