Пример:
HTML:
|
1 2 3 4 5 6 7 |
<a class="circle-link" href="#link"> <div class="circle"> <div class="circle-inner"> Кнопка </div> </div> </a> |
CSS:
Если кнопка расположена на белом фоне, то следует удалить стили .circle::before, т.к. они добавляют белую обводку у рамки.
|
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 |
.circle, .circle-inner { border-radius: 50%; height: 140px; width: 140px; box-sizing: content-box; } .circle { background-color: #fff; padding: 20px; position: relative; box-shadow: inset -20px 20px 20px rgba(0,0,0,.2), -20px 20px 30px rgba(0,0,0,.3); display: inline-block; margin: 20px auto; } .circle::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; box-shadow: inset -2px 2px 2px #fff; border-radius: 50%; } .circle-inner { display: flex; align-items: center; justify-content: center; box-shadow: inset -3px 3px 6px rgba(0, 0, 0, .3); background: #337AB7; /* Фон кнопки */ color: #fff; text-decoration: none; font-size: 24px; letter-spacing: 1px; font-weight: bold; text-transform: uppercase; font-family: 'Roboto', sans-serif; transition: all .3s ease-in-out; } .circle-link:hover .circle-inner { background: #BFE2FF; /* Фон кнопки при наведении */ color: #337AB7; } |
Добавить комментарий: