Button by kosedagyazilim
#e8e8e8
1.button { 2 display: inline-block; 3 padding: 12px 28px; 4 margin: 10px; 5 font-size: 24px; 6 font-weight: bold; 7 text-transform: uppercase; 8 color: #fff; 9 background-image: linear-gradient(to bottom right, #00c6ff, #0072ff); 10 border: none; 11 border-radius: 40px; 12 box-shadow: 0px 4px 0px #0072ff; 13 transition: all 0.2s ease-in-out; 14 cursor: pointer; 15} 16 17.button:hover { 18 transform: translateY(-2px); 19 box-shadow: 0px 6px 0px #0072ff; 20} 21 22.button:active { 23 transform: translateY(0px); 24 box-shadow: none; 25 background-image: linear-gradient(to bottom right, #0072ff, #00c6ff); 26} 27 28.button:before, 29.button:after { 30 content: ""; 31 position: absolute; 32 width: 0; 33 height: 0; 34} 35 36.button:before { 37 top: -3px; 38 left: -3px; 39 border-radius: 40px; 40 border-top: 3px solid #fff; 41 border-left: 3px solid #fff; 42} 43 44.button:after { 45 bottom: -3px; 46 right: -3px; 47 border-radius: 40px; 48 border-bottom: 3px solid #fff; 49 border-right: 3px solid #fff; 50} 51
6.3K views
6.3K views
MIT License