Загрузка...

Интерактивная кнопка CTA с 3D градиентом и тенью при наведении/клике. CSS, HTML. Для лендингов, ссылок.
<button style="display: flex; align-items: center; justify-content: center; outline: none; cursor: pointer; width: 150px; height: 50px; background-image: linear-gradient(to top, rgb(216, 217, 219) 0%, rgb(255, 255, 255) 80%, rgb(253, 253, 253) 100%); border-radius: 30px; border: 1px solid rgb(143, 144, 146); transition: 0.2s; font-family: "Source Sans Pro", sans-serif; font-size: 14px; font-weight: 600; color: rgb(96, 96, 96); text-shadow: rgb(255, 255, 255) 0px 1px;" onmouseover="this.style.boxShadow='0 4px 3px 1px #FCFCFC, 0 6px 8px #D6D7D9, 0 -4px 4px #CECFD1, 0 -6px 4px #FEFEFE, inset 0 0 3px 3px #CECFD1'" onmouseout="this.style.boxShadow=''" onmousedown="this.style.boxShadow='0 4px 3px 1px #FCFCFC, 0 6px 8px #D6D7D9, 0 -4px 4px #CECFD1, 0 -6px 4px #FEFEFE, inset 0 0 5px 3px #999, inset 0 0 30px #aaa'" onmouseup="this.style.boxShadow='0 4px 3px 1px #FCFCFC, 0 6px 8px #D6D7D9, 0 -4px 4px #CECFD1, 0 -6px 4px #FEFEFE, inset 0 0 3px 3px #CECFD1'" onfocus="this.style.boxShadow='0 4px 3px 1px #FCFCFC, 0 6px 8px #D6D7D9, 0 -4px 4px #CECFD1, 0 -6px 4px #FEFEFE, inset 0 0 5px 3px #999, inset 0 0 30px #aaa'" onblur="this.style.boxShadow=''" class="text-lg">View My Work</button>