Up to 70% off on hosting for WordPress Websites $2.95 /mo

Csshint recommends hosting

Button Border And Text Color Fill On Hover

Button Border and Text Color Fill On Hover using CSS only. this Amazing snippet designed by Giana.

Button Border text Color fill

Demo : Button Border text Color fill


[code language=”html”]
<button class="btn draw-border">Draw Border</button>


[code language=”css”]
//=== Drawing effect

@mixin btn-border-drawing($color: #ccc, $hover: black, $width: 2px, $vertical: top, $horizontal: left, $duration: 0.25s) {
box-shadow: inset 0 0 0 $width $color;
color: $color;
transition: color $duration $duration/3;
position: relative;

&::after {
border: 0 solid transparent;
box-sizing: border-box;
content: ”;
pointer-events: none;
position: absolute;
width: 0; height: 0;

#{$vertical}: 0;
#{$horizontal}: 0;

&::before {
$h-side: if($horizontal == ‘left’, ‘right’, ‘left’);

border-#{$vertical}-width: $width;
border-#{$h-side}-width: $width;

&::after {
$v-side: if($vertical == ‘top’, ‘bottom’, ‘top’);

border-#{$v-side}-width: $width;
border-#{$horizontal}-width: $width;

&:hover {
color: $hover;

&::after {
border-color: $hover;
transition: border-color 0s, width $duration, height $duration;
width: 100%;
height: 100%;

&::before { transition-delay: 0s, 0s, $duration; }

&::after { transition-delay: 0s, $duration, 0s; }

.draw-border {
@include btn-border-drawing(#58afd1, #ffe593, 4px, bottom, right);

//=== Button styling, semi-ignore
.btn {
background: none;
border: none;
cursor: pointer;
line-height: 1.5;
font: 700 1.2rem ‘Roboto Slab’, sans-serif;
padding: 1em 2em;
letter-spacing: 0.05rem;

&:focus { outline: 2px dotted #55d7dc; }

//=== Pen styling, ignore
body {
background: #1f1a25;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;

Sass button border hover effect mixin