Button by TISEPSE
#212121
1.bck-grnd { 2 position: relative; 3 display: flex; 4 background-color: #dac0a3; 5 padding: 15px 20px; 6 font-size: 25px; 7 color: black; 8 text-decoration: none; 9 border: 3px solid transparent; 10 overflow: hidden; 11 font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; 12 z-index: 2; 13 border-radius: 10px; 14 letter-spacing: 3px; 15 box-shadow: 0 0.4rem #eadbc8; 16 box-shadow: 0.4rem 0.4rem 0 #eadbc8; 17 transition: 0.5s; 18} 19 20.bck-grnd .style { 21 background: #f8f0e5; 22 height: 150px; 23 width: 100%; 24 position: absolute; 25 left: 0; 26 bottom: 0; 27 border-radius: 30px 30px 0px 0px; 28 top: 120%; 29 z-index: -1; 30 transition: 0.5s; 31} 32 33.bck-grnd:hover .style { 34 top: -70%; 35 border-radius: 50px 50px 0px 0px; 36} 37 38.bck-grnd:hover { 39 color: #d8ba98; 40 border: 3px solid #dac0a3; 41 box-shadow: none; 42} 43 44.bck-grnd:active { 45 transform: scale(1.1); 46} 47
488 views
488 views
Variations
1 MIT License