Button by 3bdel3ziz-T
#212121
1/*making bell shape with one div */ 2.bell { 3 border: 2.17px solid white; 4 border-radius: 10px 10px 0 0; 5 width: 15px; 6 height: 17px; 7 background: transparent; 8 display: block; 9 position: relative; 10 top: -3px; 11} 12.bell::before, 13.bell::after { 14 content: ""; 15 background: white; 16 display: block; 17 position: absolute; 18 left: 50%; 19 transform: translateX(-50%); 20 height: 2.17px; 21} 22.bell::before { 23 top: 100%; 24 width: 20px; 25} 26.bell::after { 27 top: calc(100% + 4px); 28 width: 7px; 29} 30/*container main styling*/ 31.notification { 32 background: transparent; 33 border: none; 34 padding: 15px 15px; 35 border-radius: 50px; 36 cursor: pointer; 37 transition: 300ms; 38 position: relative; 39 display: flex; 40 align-items: center; 41 justify-content: center; 42} 43/*notifications number with before*/ 44.notification::before { 45 content: "1"; 46 color: white; 47 font-size: 10px; 48 width: 12px; 49 height: 12px; 50 border-radius: 50%; 51 background-color: red; 52 position: absolute; 53 right: 8px; 54 top: 8px; 55 display: flex; 56 justify-content: center; 57 align-items: center; 58 z-index: 1000; 59} 60/*container background hover effect*/ 61.notification:hover { 62 background: rgba(170, 170, 170, 0.062); 63} 64/*container animations*/ 65.notification:hover > .bell-container { 66 animation: bell-animation 650ms ease-out 0s 1 normal both; 67} 68/*bell ring and scale animation*/ 69@keyframes bell-animation { 70 20% { 71 transform: rotate(15deg); 72 } 73 74 40% { 75 transform: rotate(-15deg); 76 scale: 1.1; 77 } 78 60% { 79 transform: rotate(10deg); 80 scale: 1.1; 81 } 82 80% { 83 transform: rotate(-10deg); 84 } 85 0%, 86 100% { 87 transform: rotate(0deg); 88 } 89} 90
385 views
385 views
MIT License