Button by KhaledMatalkah
#212121
1.button { 2 background-color: transparent; 3 color: #ffffff; 4 padding: 15px 30px; 5 border-radius: 5px; 6 cursor: pointer; 7 position: relative; 8 overflow: hidden; 9 transition: background-color 0.3s ease-in, transform 0.3s ease; 10 font-size: 18px; 11 font-weight: bold; 12 border: none; 13 box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3); 14} 15 16.button:before { 17 content: ""; 18 position: absolute; 19 top: 0; 20 left: 0; 21 width: 0; 22 height: 100%; 23 background-color: #76a6ca; 24 opacity: 0; 25 transition: width 0.7s ease-in-out, opacity 0.9s ease; 26} 27 28.button:hover { 29 transform: scale(1.05); 30} 31 32.button:hover:before { 33 width: 100%; 34 opacity: 0.6; 35} 36 37.button:active { 38 background-color: #76a6ca; 39 box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.5); 40 transform: scale(0.98); 41} 42
425 views
425 views
Variations
1 MIT License