In preparation for applying the effects on the buttons, and to not affect any other buttons on the page/site, I’ve added a class of .btn-effect
to all buttons and the following CSS, then a class of .btn-effect-1
, .btn-effect-2
, .btn-effect-3
, etc. to each button incrementally to be able to style them individually.
</>
.btn-effect-1::before { content: ''; display: block; position: absolute; top: 0; left: 50%; margin: 0; width: 0; height: 100%; opacity: 0; z-index: -1; background: rgba(66,133,244,0.5); transition: all .7s ease-in-out; transform: skewX(-45deg); } .btn-effect-1:hover::before { width: 140%; margin-left: -70%; opacity: 1; }
</>
.btn-effect-2::before { content: ''; display: block; position: absolute; bottom: 0; left: 0; margin: 0; width: 100%; height: 0; z-index: -1; background: rgba(66,133,244,0.5); transition: all .3s ease-out; opacity: 1; } .btn-effect-2:hover::before { height: 100%; }
</>
.btn-effect-3 { transition: 0.25s; } .btn-effect-3:hover, .btn-effect-3:focus { animation: pulse 1s; box-shadow: 0 0 0 2em rgba(255,255,255,0); } @keyframes pulse { 0% { box-shadow: 0 0 0 0 #090; } }
</>
.btn-effect-4:hover { color: #FFF; border-color: transparent !important; } .btn-effect-4::before, .btn-effect-4::after { display: inline-block; content: ''; position: absolute; width: 0; height: 0; transition: all .5s ease; z-index: -1; opacity: 0.5 !important; } .btn-effect-4::before { top: 0; left: 0; background: #EA4335; } .btn-effect-4::after { bottom: 0; right: 0; background: #4285F4; transition-delay: .3s !important; } .btn-effect-4:hover::before, .btn-effect-4:hover::after { width: calc(100% - 10px); height: calc(100% - 10px); }
Recent Comments