Close

Ghost Button Animation

This is another example of a button view with hover effects designed with the use of HTML and CSS. Variables have been created to define the colors and font type to store values in CSS so variable names could be used repeatedly to avoid setting the same value in different places. Those variables are $font- 'Source Sans Pro', sans-serif; $primary- #FF0072, $second- #644cad, $third- #4426a8. The background colors of the body are set as #24252A and #F5F0FF. The styles of button 1 is initially set to font-size: 18px, letter-spacing: 2px, text-transform: uppercase, text-align: center, width: 270px, padding: 14px 0px, border: 3px solid $primary, border-radius: 2px and box-shadow: 0 2px 10px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.1). The styles of button 2 is initially set to font-size: 18px, letter-spacing: 2px, text-transform: uppercase, text-align: center, width: 270px, padding: 14px 0px, border: 3px solid $second, border-radius: 2px, and box-shadow: 0 2px 10px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.1). Both buttons get highlighted on a focus event. Source: https://codepen.io/wintr/pen/wWoRVW

Post Comment or Questions

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Your email address will not be published.

Several Related Snippets

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.