Back
Button
1 2<button type="button" class="button">3 <span class="button__text">Download</span>4 <span class="button__icon"><svg class="svg" data-name="Layer 2" id="bdd05811-e15d-428c-bb53-8661459f9307" viewBox="0 0 35 35" xmlns="http://www.w3.org/2000/svg"><path d="M17.5,22.131a1.249,1.249,0,0,1-1.25-1.25V2.187a1.25,1.25,0,0,1,2.5,0V20.881A1.25,1.25,0,0,1,17.5,22.131Z"></path><path d="M17.5,22.693a3.189,3.189,0,0,1-2.262-.936L8.487,15.006a1.249,1.249,0,0,1,1.767-1.767l6.751,6.751a.7.7,0,0,0,.99,0l6.751-6.751a1.25,1.25,0,0,1,1.768,1.767l-6.752,6.751A3.191,3.191,0,0,1,17.5,22.693Z"></path><path d="M31.436,34.063H3.564A3.318,3.318,0,0,1,.25,30.749V22.011a1.25,1.25,0,0,1,2.5,0v8.738a.815.815,0,0,0,.814.814H31.436a.815.815,0,0,0,.814-.814V22.011a1.25,1.25,0,1,1,2.5,0v8.738A3.318,3.318,0,0,1,31.436,34.063Z"></path></svg></span>5</button>
1 2.button { 3 --main-focus: #2d8cf0; 4 --font-color: #dedede; 5 --bg-color-sub: #222; 6 --bg-color: #323232; 7 --main-color: #dedede; 8 position: relative; 9 width: 150px;10 height: 40px;11 cursor: pointer;12 display: flex;13 align-items: center;14 border: 2px solid var(--main-color);15 box-shadow: 4px 4px var(--main-color);16 background-color: var(--bg-color);17 border-radius: 10px;18 overflow: hidden;19}20 21.button, .button__icon, .button__text {22 transition: all 0.3s;23}24 25.button .button__text {26 transform: translateX(21px);27 color: var(--font-color);28 font-weight: 600;29}30 31.button .button__icon {32 position: absolute;33 transform: translateX(109px);34 height: 100%;35 width: 39px;36 background-color: var(--bg-color-sub);37 display: flex;38 align-items: center;39 justify-content: center;40}41 42.button .svg {43 width: 20px;44 fill: var(--main-color);45}46 47.button:hover {48 background: var(--bg-color);49}50 51.button:hover .button__text {52 color: transparent;53}54 55.button:hover .button__icon {56 width: 148px;57 transform: translateX(0);58}59 60.button:active {61 transform: translate(3px, 3px);62 box-shadow: 0px 0px var(--main-color);63}
MIT License