Button by vinodjangid07
#212121
1.bookmarkBtn { 2 width: 100px; 3 height: 40px; 4 border-radius: 40px; 5 border: 1px solid rgba(255, 255, 255, 0.349); 6 background-color: rgb(12, 12, 12); 7 display: flex; 8 align-items: center; 9 justify-content: center; 10 cursor: pointer; 11 transition-duration: 0.3s; 12 overflow: hidden; 13} 14 15.IconContainer { 16 width: 30px; 17 height: 30px; 18 background: linear-gradient(to bottom, rgb(255, 136, 255), rgb(172, 70, 255)); 19 border-radius: 50px; 20 display: flex; 21 align-items: center; 22 justify-content: center; 23 overflow: hidden; 24 z-index: 2; 25 transition-duration: 0.3s; 26} 27 28.icon { 29 border-radius: 1px; 30} 31 32.text { 33 height: 100%; 34 width: 60px; 35 display: flex; 36 align-items: center; 37 justify-content: center; 38 color: white; 39 z-index: 1; 40 transition-duration: 0.3s; 41 font-size: 1.04em; 42} 43 44.bookmarkBtn:hover .IconContainer { 45 width: 90px; 46 transition-duration: 0.3s; 47} 48 49.bookmarkBtn:hover .text { 50 transform: translate(10px); 51 width: 0; 52 font-size: 0; 53 transition-duration: 0.3s; 54} 55 56.bookmarkBtn:active { 57 transform: scale(0.95); 58 transition-duration: 0.3s; 59} 60
8.4K views
8.4K views
LovePolitics 1. May at 5:27
1. May at 5:27
Love (:
vinodjangid07 1. May at 9:08
1. May at 9:08
@LovePolitics Thanks :)
barisdogansutcu 3. January at 8:59
3. January at 8:59
Instead of setting border-radius to 50%, you should set it to 50px. You will see that the CSS error is fixed.
vinodjangid07 3. January at 10:53
3. January at 10:53
@barisdogansutcu You're absolutely right, Thanks for the suggestion!
Variations
1 MIT License