/* HTML */ <a href="#"><button class="button-27">Button</button></a> /* CSS */ .button-27 { padding: 1rem 2rem; font-weight: 700; background: rgb(255, 255, 255); color: blueviolet; border-radius: .5rem; border-bottom: 2px solid blueviolet; border-right: 2px solid blueviolet; border-top: 2px solid white; border-left: 2px solid white; transition-duration: 1s; transition-property: border-top, border-left, border-bottom, border-right, box-shadow; } .button-27:hover { border-top: 2px solid blueviolet; border-left: 2px solid blueviolet; border-bottom: 2px solid rgb(238, 103, 238); border-right: 2px solid rgb(238, 103, 238); box-shadow: rgba(240, 46, 170, 0.4) 5px 5px, rgba(240, 46, 170, 0.3) 10px 10px, rgba(240, 46, 170, 0.2) 15px 15px; }
0 Comments