This tutorial is about how to create a button with a good effect.
First, the HTML 5 source code comes with the button using the div tag:
1 | <div class="button effect">This is a issue!</div> |
The next step is to use a CSS format to add the font style and create these settings:
- button settings for after, before and hover;
- two rectangles each with the animation effects after, before and hover;
The crossover effect of the rectangles is achieved along these lines of code:
1 2 3 4 | .effect:hover:before, .effect:hover:after { height: 100%; } |
This is the source code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | @import url('https://fonts.googleapis.com/css?family=Lobster'); .button { position: relative; padding: 1rem 1rem; padding-right: 1rem; transition: all 760ms cubic-bezier(0.76, 0, 0.76, 1); cursor: pointer; user-select: none; font-size: 20px; color: var(--inv); } .button:before, .button:after { content: ''; position: absolute; transition: inherit; z-index: -1; } .button:hover { transition-delay: .1s; color:white; } .effect:before, .effect:after { bottom: 0; left: 0; height: 0; width: 100%; } .effect:before { border-left: 0%; border-right: 0%; bottom: 0; border: 1px solid var(--inv); border-top: 100%; border-bottom: 0%; } .effect:after { top: 0; left: 0; height: 0%; width: 100%; border: 1px solid var(--inv); top: 0%; height: 0%; } .effect:hover:before, .effect:hover:after { height: 100%; } /* all global effects */ *, *:before, *:after { box-sizing: border-box; } body { --inv: #0F4C81; display: flex; justify-content: center; align-items: center; flex-direction: column; height: 100vh; width: 100%; background-image: linear-gradient(180deg, #000000 0%, #0F4C81 76%); } html { font-size: 20px; font-family: 'Lobster', serif; text-shadow: 4px 4px 4px #000000; } div {margin-bottom: 1rem;} div:last-child {margin-bottom: 0;} |
See the Pen
button_effect_001 by Cătălin George Feștilă (@catafest)
on CodePen.