Button by escannord
#e8e8e8
1.button { 2 --color: rgb(56, 55, 100); 3 padding: 1rem 2rem; 4 background-color: transparent; 5 color: var(--color); 6 font-weight: bolder; 7 text-transform: uppercase; 8 display: flex; 9 justify-content: space-around; 10 align-items: center; 11 cursor: pointer; 12 position: relative; 13 border-radius: 5px; 14} 15 16.arrow { 17 display: inline-flex; 18 position: relative; 19 width: 30px; 20 height: 15px; 21 margin-left: 0.5rem; 22} 23 24.arrow::after, 25.arrow::before { 26 content: ""; 27 display: inline-block; 28 position: absolute; 29 border-color: var(--color); 30} 31 32.arrow::after { 33 width: 10px; 34 height: 0; 35 border: 2px solid var(--color); 36 top: 50%; 37 left: 0; 38 transform: translateY(-50%); 39} 40 41.arrow::before { 42 width: 10px; 43 height: 10px; 44 border-top: 4px solid var(--color); 45 border-right: 4px solid var(--color); 46 left: 3px; 47 top: 50%; 48 transform: translateY(-50%) rotate(45deg); 49} 50 51.button:hover { 52 background-color: var(--color); 53 color: white; 54} 55 56.button:hover .arrow { 57 transform: translateX(10px); 58} 59 60.button:hover .text { 61 transform: translateX(10px); 62} 63 64.button:hover .arrow::after { 65 width: 25px; 66 border-color: white; 67} 68 69.button:hover .arrow::before { 70 left: 15px; 71 border-color: white; 72} 73 74.button, 75.text, 76.arrow, 77.arrow::after, 78.arrow::before, 79.button::before, 80.button::after { 81 transition: all 0.3s, box-shadow 0.2s; 82} 83 84.button::before { 85 content: ""; 86 position: absolute; 87 height: 100%; 88 width: 10px; 89 border-radius: 5px; 90 border: solid 3px var(--color); 91 border-right-color: transparent; 92 background-color: transparent; 93 left: 0; 94 top: 50%; 95 transform: translateY(-50%); 96} 97 98.button::after { 99 content: ""; 100 position: absolute; 101 height: 100%; 102 width: 10px; 103 border-radius: 5px; 104 border: solid 3px var(--color); 105 border-left-color: transparent; 106 background-color: transparent; 107 right: 0; 108 top: 50%; 109 transform: translateY(-50%); 110} 111 112.button:hover:before, 113.button:hover:after { 114 width: 50% !important; 115} 116 117.button:active { 118 box-shadow: 0px 0px 0px 7px rgba(79, 78, 105, 0.295); 119} 120
400 views
400 views
MIT License