Button Generator

Click the buttons to copy the css hover animation

.btn.btn-border-pop::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; border: var(--border-size) solid var(--background-color); transition: top, left, right, bottom, 100ms ease-in-out; } .btn.btn-border-pop:hover::before, .btn.btn-border-pop:focus::before { top: calc(var(--border-size) * -2); left: calc(var(--border-size) * -2); right: calc(var(--border-size) * -2); bottom: calc(var(--border-size) * -2); }

.btn.btn-background-slide::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: -1; background-color: var(--accent-color); transition: transform 300ms ease-in-out; transform: scaleX(0); transform-origin: left; } .btn.btn-background-slide:hover::before, .btn.btn-background-slide:focus::before { transform: scaleX(1); } .btn.btn-background-slide { transition: color 300ms ease-in-out; z-index: 1; } .btn.btn-background-slide:hover, .btn.btn-background-slide:focus { color: white; }

.btn.btn-background-circle::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; background-color: var(--background-color); border-radius: 50%; transition: transform 500ms ease-in-out; transform: scale(1.5); } .btn.btn-background-circle:hover::before, .btn.btn-background-circle:focus::before { transform: scale(0); } .btn.btn-background-circle { z-index: 1; overflow: hidden; background-color: var(--accent-color); transition: color 500ms ease-in-out; } .btn.btn-background-circle:hover, .btn.btn-background-circle:focus { color: white; }

.btn.btn-border-underline::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: var(--border-size); background-color: var(--accent-color); transition: transform 300ms ease-in-out; transform: scaleX(0); } .btn.btn-border-underline:hover::before, .btn.btn-border-underline:focus::before { transform: scaleX(1); }

.btn.shadow-border-sliding-sand{ min-width: 130px; height: 40px; color: #fff; padding: 5px 10px; font-weight: bold; cursor: pointer; transition: all 0.3s ease; position: relative; display: inline-block; outline: none; border-radius: 5px; border: none; box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5), 7px 7px 20px 0px rgba(0,0,0,.1), 4px 4px 5px 0px rgba(0,0,0,.1); background: #adb5bd; z-index: 1; } .btn.shadow-border-sliding-sand:hover:after { width: 100%; left: 0; } .btn.shadow-border-sliding-sand:after { border-radius: 5px; position: absolute; content: ""; width: 0; height: 100%; top: 0; z-index: -1; box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5), 7px 7px 20px 0px rgba(0,0,0,.1), 4px 4px 5px 0px rgba(0,0,0,.1); transition: all 0.3s ease; background-color: #ced4da; right: 0; } .btn.shadow-border-sliding-sand:active { top: 2px; }

.btn.btn-glow:hover{ background: var(--background-color); box-shadow: 0 0 5px rgb(108, 50, 122), 0 0 10px rgb(108, 50, 122), 0 0 20px rgb(108, 50, 122), 0 0 50px rgb(108, 50, 122); }

.btn.btn-double:hover{ box-shadow: 10px 10px 0px rgb(108, 50, 122); top: -3px; left: -3px; }

.btn.btn-border:hover{ border: 5px solid rgb(108, 50, 122); color: rgb(108, 50, 122); background-color: #8a8a96; }

.btn.btn-fill{ position: relative; } .btn.btn-fill span{ position: relative; border-radius: 12px; } .btn.btn-fill::before{ content: ""; position: absolute; left: -0.1px; right: -0.1px; bottom: 0; height: 100%; transform: scaleY(.2); transition: transform .6s cubic-bezier(0.53, 0.21, 0, 1); transform-origin: bottom; background-color: var(--accent-color); opacity: 0.5; border-radius: 12px; } .btn.btn-fill:hover::before{ transform: scaleY(1); border-radius: 12px; }