Button by alexmaracinaru
#e8e8e8
1button { 2 cursor: pointer; 3 font-weight: 700; 4 font-family: Helvetica,"sans-serif"; 5 transition: all .2s; 6 padding: 10px 20px; 7 border-radius: 100px; 8 background: #cfef00; 9 border: 1px solid transparent; 10 display: flex; 11 align-items: center; 12 font-size: 15px; 13} 14 15button:hover { 16 background: #c4e201; 17} 18 19button > svg { 20 width: 34px; 21 margin-left: 10px; 22 transition: transform .3s ease-in-out; 23} 24 25button:hover svg { 26 transform: translateX(5px); 27} 28 29button:active { 30 transform: scale(0.95); 31} 32 33
26K views
26K views
VeejaLiu 18. July at 11:02
18. July at 11:02
Thank you for the stunning styles! They're a perfect fit for my project! 🌟 https://github.com/VeejaLiu/ImageUrlRenderer
alexmaracinaru
Pro+
21. July at 11:2521. July at 11:25
@VeejaLiu You're welcome. One observation, if I may: I'd keep "Show Image" in one line inside the button, as per the universal design conventions. See if you could fit it like that in your layout.
Variations
1 MIT License