This post contains a total of 11+ CSS Border Examples with Source Code. All these Border Examples are made using CSS.
You can use the source code of these examples with credits to the original owner.
Related Posts
CSS Border Examples
1. Magic Border Mixin
Made by Adam Kuhn. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<link href="https://fonts.googleapis.com/css?family=Oswald&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
body {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
height: 100vh;
}
body .wrap {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 450px;
}
body .wrap a {
text-decoration: none;
color: #222;
padding: 20px;
background: #efefef;
text-transform: uppercase;
text-align: center;
position: relative;
font-family: "Oswald";
margin: 20px;
flex-grow: 1;
cursor: pointer;
}
body .wrap a:before {
content: "";
position: absolute;
width: calc(100% + 4px);
height: calc(100% + 4px);
top: calc(2px/-1);
left: calc(2px/-1);
background: linear-gradient(to right, blue 0%, blue 100%), linear-gradient(to top, blue 50%, transparent 50%), linear-gradient(to top, blue 50%, transparent 50%), linear-gradient(to right, blue 0%, blue 100%), linear-gradient(to left, blue 0%, blue 100%);
background-size: 100% 2px, 2px 200%, 2px 200%, 0% 2px, 0% 2px;
background-position: 50% 100%, 0% 0%, 100% 0%, 100% 0%, 0% 0%;
background-repeat: no-repeat, no-repeat;
transition: transform 0.3s ease-in-out, background-position 0.3s ease-in-out, background-size 0.3s ease-in-out;
transform: scaleX(0) rotate(0deg);
transition-delay: 0.6s, 0.3s, 0s;
}
body .wrap a:hover:before {
background-size: 200% 2px, 2px 400%, 2px 400%, 55% 2px, 55% 2px;
background-position: 50% 100%, 0% 100%, 100% 100%, 100% 0%, 0% 0%;
transform: scaleX(1) rotate(0deg);
transition-delay: 0s, 0.3s, 0.6s;
}
body .wrap a:nth-of-type(2) {
position: relative;
}
body .wrap a:nth-of-type(2):before {
content: "";
position: absolute;
width: calc(100% + 8px);
height: calc(100% + 8px);
top: calc(4px/-1);
left: calc(4px/-1);
background: linear-gradient(to right, #222 0%, #222 100%), linear-gradient(to top, #222 50%, transparent 50%), linear-gradient(to top, #222 50%, transparent 50%), linear-gradient(to right, #222 0%, #222 100%), linear-gradient(to left, #222 0%, #222 100%);
background-size: 100% 4px, 4px 200%, 4px 200%, 0% 4px, 0% 4px;
background-position: 50% 100%, 0% 0%, 100% 0%, 100% 0%, 0% 0%;
background-repeat: no-repeat, no-repeat;
transition: transform 0.2s ease-in-out, background-position 0.2s ease-in-out, background-size 0.2s ease-in-out;
transform: scaleX(0) rotate(180deg);
transition-delay: 0.4s, 0.2s, 0s;
}
body .wrap a:nth-of-type(2):hover:before {
background-size: 200% 4px, 4px 400%, 4px 400%, 55% 4px, 55% 4px;
background-position: 50% 100%, 0% 100%, 100% 100%, 100% 0%, 0% 0%;
transform: scaleX(1) rotate(180deg);
transition-delay: 0s, 0.2s, 0.4s;
}
body .wrap a:nth-of-type(3) {
position: relative;
align-self: flex-end;
}
body .wrap a:nth-of-type(3):before {
content: "";
position: absolute;
width: calc(100% + 20px);
height: calc(100% + 20px);
top: calc(10px/-1);
left: calc(10px/-1);
-webkit-mask: linear-gradient(to right, #000 0%, #000 100%), linear-gradient(to top, #000 50%, transparent 50%), linear-gradient(to top, #000 50%, transparent 50%), linear-gradient(to right, #000 0%, #000 100%), linear-gradient(to left, #000 0%, #000 100%);
mask: linear-gradient(to right, #000 0%, #000 100%), linear-gradient(to top, #000 50%, transparent 50%), linear-gradient(to top, #000 50%, transparent 50%), linear-gradient(to right, #000 0%, #000 100%), linear-gradient(to left, #000 0%, #000 100%);
-webkit-mask-size: 100% 10px, 10px 200%, 10px 200%, 0% 10px, 0% 10px;
mask-size: 100% 10px, 10px 200%, 10px 200%, 0% 10px, 0% 10px;
-webkit-mask-position: 50% 100%, 0% 0%, 100% 0%, 100% 0%, 0% 0%;
mask-position: 50% 100%, 0% 0%, 100% 0%, 100% 0%, 0% 0%;
-webkit-mask-repeat: no-repeat, no-repeat;
mask-repeat: no-repeat, no-repeat;
transition: transform 0.4s ease-in-out, -webkit-mask-position 0.4s ease-in-out, -webkit-mask-size 0.4s ease-in-out;
transition: transform 0.4s ease-in-out, mask-position 0.4s ease-in-out, mask-size 0.4s ease-in-out;
transition: transform 0.4s ease-in-out, mask-position 0.4s ease-in-out, mask-size 0.4s ease-in-out, -webkit-mask-position 0.4s ease-in-out, -webkit-mask-size 0.4s ease-in-out;
transform: scaleX(0) rotate(0deg);
transition-delay: 0.8s, 0.4s, 0s;
background: linear-gradient(to bottom, #40e0d0, #ff8c00, #ff0080);
}
body .wrap a:nth-of-type(3):hover:before {
-webkit-mask-size: 200% 10px, 10px 400%, 10px 400%, 55% 10px, 55% 10px;
mask-size: 200% 10px, 10px 400%, 10px 400%, 55% 10px, 55% 10px;
-webkit-mask-position: 50% 100%, 0% 100%, 100% 100%, 100% 0%, 0% 0%;
mask-position: 50% 100%, 0% 100%, 100% 100%, 100% 0%, 0% 0%;
transform: scaleX(1) rotate(0deg);
transition-delay: 0s, 0.4s, 0.8s;
}
</style>
</head>
<body>
<div class="wrap">
<a href="#">Magic Border</a>
<a href="#">Magic Border 2</a>
<a href="#">Magic Border 3</a>
</div>
</body>
</html>
2. CSS Border transitions
Made by Giana. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<style>
button {
background: none;
border: 0;
box-sizing: border-box;
margin: 1em;
padding: 1em 2em;
box-shadow: inset 0 0 0 2px #f45e61;
color: #f45e61;
font-size: inherit;
font-weight: 700;
position: relative;
vertical-align: middle;
}
button::before, button::after {
box-sizing: inherit;
content: "";
position: absolute;
width: 100%;
height: 100%;
}
.draw {
transition: color 0.25s;
}
.draw::before, .draw::after {
border: 2px solid transparent;
width: 0;
height: 0;
}
.draw::before {
top: 0;
left: 0;
}
.draw::after {
bottom: 0;
right: 0;
}
.draw:hover {
color: #60daaa;
}
.draw:hover::before, .draw:hover::after {
width: 100%;
height: 100%;
}
.draw:hover::before {
border-top-color: #60daaa;
border-right-color: #60daaa;
transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
}
.draw:hover::after {
border-bottom-color: #60daaa;
border-left-color: #60daaa;
transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
}
.meet:hover {
color: #fbca67;
}
.meet::after {
top: 0;
left: 0;
}
.meet:hover::before {
border-top-color: #fbca67;
border-right-color: #fbca67;
}
.meet:hover::after {
border-bottom-color: #fbca67;
border-left-color: #fbca67;
transition: height 0.25s ease-out, width 0.25s ease-out 0.25s;
}
.center:hover {
color: #6477b9;
}
.center::before, .center::after {
top: 0;
left: 0;
height: 100%;
width: 100%;
transform-origin: center;
}
.center::before {
border-top: 2px solid #6477b9;
border-bottom: 2px solid #6477b9;
transform: scale3d(0, 1, 1);
}
.center::after {
border-left: 2px solid #6477b9;
border-right: 2px solid #6477b9;
transform: scale3d(1, 0, 1);
}
.center:hover::before, .center:hover::after {
transform: scale3d(1, 1, 1);
transition: transform 0.5s;
}
.spin {
width: 5em;
height: 5em;
padding: 0;
}
.spin:hover {
color: #0eb7da;
}
.spin::before, .spin::after {
top: 0;
left: 0;
}
.spin::before {
border: 2px solid transparent;
}
.spin:hover::before {
border-top-color: #0eb7da;
border-right-color: #0eb7da;
border-bottom-color: #0eb7da;
transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s;
}
.spin::after {
border: 0 solid transparent;
}
.spin:hover::after {
border-top: 2px solid #0eb7da;
border-left-width: 2px;
border-right-width: 2px;
transform: rotate(270deg);
transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s;
}
.circle {
border-radius: 100%;
box-shadow: none;
}
.circle::before, .circle::after {
border-radius: 100%;
}
.thick {
color: #f45e61;
}
.thick:hover {
color: #fff;
font-weight: 700;
}
.thick::before {
border: 2.5em solid transparent;
z-index: -1;
}
.thick::after {
mix-blend-mode: color-dodge;
z-index: -1;
}
.thick:hover::before {
background: #f45e61;
border-top-color: #f45e61;
border-right-color: #f45e61;
border-bottom-color: #f45e61;
transition: background 0s linear 0.4s, border-top-color 0.15s linear, border-right-color 0.15s linear 0.15s, border-bottom-color 0.15s linear 0.25s;
}
.thick:hover::after {
border-top: 2.5em solid #f45e61;
border-left-width: 2.5em;
border-right-width: 2.5em;
}
/* Page styling */
html {
background: #fefefe;
}
body {
background: #fefefe;
color: #4b507a;
font: 300 24px/1.5 Lato, sans-serif;
margin: 1em auto;
max-width: 36em;
padding: 1em 1em 2em;
text-align: center;
}
.buttons {
isolation: isolate;
}
h1 {
font-weight: 300;
font-size: 2.5em;
}
</style>
</head>
<body>
<h1>CSS Border Transitions</h1>
<section class="buttons">
<button class="draw">Draw</button>
<button class="draw meet">Draw Meet</button>
<button class="center">Center</button>
<button class="spin">Spin</button>
<button class="spin circle">Spin Circle</button>
<button class="spin thick">Spin Thick</button>
</section>
</body>
</html>3. Border-gradient mixin
Made by John Grishin. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
.circle {
height: 100px;
width: 100px;
border-radius: 100%;
box-shadow: 0 1px 0 0 rgba(255, 192, 0, 0.25), 0 -1px 0 0 rgba(255, 64, 0, 0.25), 1px 0 0 0 rgba(255, 192, 0, 0.25), -1px 0 0 0 rgba(255, 64, 0, 0.25), 1px -1px 0 0 rgba(255, 128, 0, 0.5), -1px 1px 0 0 rgba(255, 128, 0, 0.5), 1px 1px 0 0 rgba(255, 255, 0, 0.75), -1px -1px 0 0 rgba(255, 0, 0, 0.75);
}
.circle:nth-of-type(2) {
box-shadow: 0 1px 0 0 rgba(225, 131, 194, 0.25), 0 -1px 0 0 rgba(165, 181, 222, 0.25), 1px 0 0 0 rgba(225, 131, 194, 0.25), -1px 0 0 0 rgba(165, 181, 222, 0.25), 1px -1px 0 0 rgba(195, 156, 208, 0.5), -1px 1px 0 0 rgba(195, 156, 208, 0.5), 1px 1px 0 0 rgba(255, 105, 180, 0.75), -1px -1px 0 0 rgba(135, 206, 235, 0.75);
animation: rotateThis 1s linear infinite;
}
.circle:nth-of-type(3) {
box-shadow: 0 1px 0 0 rgba(192, 63, 153, 0.25), 0 -1px 0 0 rgba(214, 69, 99, 0.25), 1px 0 0 0 rgba(192, 63, 153, 0.25), -1px 0 0 0 rgba(214, 69, 99, 0.25), 1px -1px 0 0 rgba(203, 66, 126, 0.5), -1px 1px 0 0 rgba(203, 66, 126, 0.5), 1px 1px 0 0 rgba(181, 59, 180, 0.75), -1px -1px 0 0 rgba(225, 72, 71, 0.75);
}
.circle-multiple {
height: 100px;
width: 100px;
}
.circle-multiple .circle {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
margin: auto;
}
.circle-multiple .circle:nth-of-type(1) {
animation: psycho 2s linear infinite;
}
.circle-multiple .circle:nth-of-type(2) {
animation: psycho 2s linear 0.1s infinite;
}
.circle-multiple .circle:nth-of-type(3) {
animation: psycho 2s linear 0.25s infinite;
}
@keyframes rotateThis {
from {
transform: rotate(0deg) scale(1);
}
to {
transform: rotate(360deg) scale(1);
}
}
@keyframes psycho {
0% {
transform: rotate(0deg) scale(1) translate(0, 0);
}
33% {
transform: rotate(360deg) scale(1) translate(5px, 5px);
}
66% {
transform: rotate(720deg) scale(1) translate(-5px, -5px);
}
100% {
transform: rotate(1080deg) scale(1) translate(0, 0);
}
}
.btn {
border: none;
display: inline-block;
background: transparent;
color: rgba(255, 255, 255, 0.7);
background: rgba(255, 255, 255, 0.05);
text-decoration: none;
padding: 15px 20px;
border-radius: 10px;
transition: all 0.2s;
box-shadow: 0 1px 0 0 rgba(159, 159, 159, 0.25), 0 -1px 0 0 rgba(139, 139, 139, 0.25), 1px 0 0 0 rgba(159, 159, 159, 0.25), -1px 0 0 0 rgba(139, 139, 139, 0.25), 1px -1px 0 0 rgba(149, 149, 149, 0.5), -1px 1px 0 0 rgba(149, 149, 149, 0.5), 1px 1px 0 0 rgba(169, 169, 169, 0.75), -1px -1px 0 0 rgba(128, 128, 128, 0.75);
}
.btn:hover {
box-shadow: 0 1px 0 0 rgba(165, 181, 222, 0.25), 0 -1px 0 0 rgba(225, 131, 194, 0.25), 1px 0 0 0 rgba(165, 181, 222, 0.25), -1px 0 0 0 rgba(225, 131, 194, 0.25), 1px -1px 0 0 rgba(195, 156, 208, 0.5), -1px 1px 0 0 rgba(195, 156, 208, 0.5), 1px 1px 0 0 rgba(135, 206, 235, 0.75), -1px -1px 0 0 rgba(255, 105, 180, 0.75);
color: white;
background: rgba(135, 206, 235, 0.05);
}
.circles > * {
display: inline-block;
vertical-align: top;
position: relative;
margin: 0 2%;
}
.circles {
transform: translateZ(0);
margin-bottom: 100px;
}
body {
background-color: #222;
color: #fff;
text-align: center;
}
.container {
overflow: hidden;
padding-bottom: 150px;
}
h1 {
font: 100 50px/1.25em "Helvetica Neue", Helvetica, Arial, sans-serif;
margin-bottom: 50px;
}
h1 span {
font-weight: 300;
}
</style>
</head>
<body>
<div class="container">
<h1> <span>border-gradient</span> demo</h1>
<div class="circles">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle-multiple">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
<a class="btn" href="https://twitter.com/exah" target="_blank">
Follow @exah on Twitter
</a>
</div>
</body>
</html>4. Imperfect Buttons
Made by Tiffany Rayside. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
@import url(https://fonts.googleapis.com/css?family=Patrick+Hand+SC);
* {
box-sizing: border-box;
}
html, body {
width: 100%;
min-height: 100%;
margin: 0;
display: flex;
flex-direction: column;
justify-content: center;
background: #F0F0D8;
font-family: "Patrick Hand SC", cursive;
}
html h1, body h1 {
margin-top: -5rem;
text-align: center;
color: #41403E;
font-size: 3rem;
}
html section, body section {
display: flex;
flex-direction: row;
justify-content: center;
width: 100%;
min-height: 100%;
margin-bottom: 3rem;
}
html section button, body section button {
align-self: center;
background: transparent;
padding: 1rem 1rem;
margin: 0 1rem;
transition: all 0.5s ease;
color: #41403E;
font-size: 2rem;
letter-spacing: 1px;
outline: none;
box-shadow: 20px 38px 34px -26px rgba(0, 0, 0, 0.2);
border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
/*
Above is shorthand for:
border-top-left-radius: 255px 15px;
border-top-right-radius: 15px 225px;
border-bottom-right-radius: 225px 15px;
border-bottom-left-radius:15px 255px;
*/
}
html section button:hover, body section button:hover {
box-shadow: 2px 8px 4px -6px rgba(0, 0, 0, 0.3);
}
html section button.lined.thick, body section button.lined.thick {
border: solid 7px #41403E;
}
html section button.dotted.thick, body section button.dotted.thick {
border: dotted 5px #41403E;
}
html section button.dashed.thick, body section button.dashed.thick {
border: dashed 5px #41403E;
}
html section button.lined.thin, body section button.lined.thin {
border: solid 2px #41403E;
}
html section button.dotted.thin, body section button.dotted.thin {
border: dotted 2px #41403E;
}
html section button.dashed.thin, body section button.dashed.thin {
border: dashed 2px #41403E;
}
@media (max-width: 620px) {
body h1 {
margin-top: 2rem;
}
body section {
display: flex;
flex-direction: column;
justify-content: center;
margin-bottom: 1rem;
}
body section button {
align-self: center;
margin-bottom: 2rem;
}
}
</style>
</head>
<body>
<h1>Hand-Drawn Border Buttons</h1>
<section>
<button class='lined thick'>Lined Thick</button>
<button class='dotted thick'>Dotted Thick</button>
<button class='dashed thick'>Dashed Thick</button>
</section>
<section>
<button class='lined thin'>Lined Thin</button>
<button class='dotted thin'>Dotted Thin</button>
<button class='dashed thin'>Dashed Thin</button>
</section>
</body>
</html>5. Animated CSS Gradient Border
Made by Mike Schultz. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<style>
@import url('https://fonts.googleapis.com/css?family=Raleway:200');
html, body {
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
background: #1D1F20;
}
#box {
display: flex;
align-items: center;
justify-content: center;
width: 400px;
height: 200px;
color: white;
font-family: 'Raleway';
font-size: 2.5rem;
}
.gradient-border {
--borderWidth: 3px;
background: #1D1F20;
position: relative;
border-radius: var(--borderWidth);
}
.gradient-border:after {
content: '';
position: absolute;
top: calc(-1 * var(--borderWidth));
left: calc(-1 * var(--borderWidth));
height: calc(100% + var(--borderWidth) * 2);
width: calc(100% + var(--borderWidth) * 2);
background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
border-radius: calc(2 * var(--borderWidth));
z-index: -1;
-webkit-animation: animatedgradient 3s ease alternate infinite;
animation: animatedgradient 3s ease alternate infinite;
background-size: 300% 300%;
}
@-webkit-keyframes animatedgradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@keyframes animatedgradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
</style>
</head>
<body>
<div class="gradient-border" id="box">Animated <br>CSS<br>Gradient Border</div>
</body>
</html>6. border-animation-css
Made by Swarup Kumar Kuila. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css'>
<style>
*{
margin:0;
padding:0;
}
.container{ padding-top: 20px;
padding-bottom: 20px;}
body{
background-color: #111845;
}
.background-img{
background-image: url("https://3.bp.blogspot.com/-piZWCW2uUbg/W2fPXxkWZgI/AAAAAAAAOu0/eydmMjTIqcwLMHEEr2H7imqoRTxMw4o9QCLcBGAs/s1600/among_trees_night_dribbble.png");
height: 400px;
width: 800px;
background-repeat: no-repeat;
background-size: cover;
margin: 5% auto;
padding:20px;
border: 1px solid #2a3cad;
border-radius: 4px;
box-shadow: 0px 0px 5px #2a3cad;
position: relative;
}
.content h2{ font-size:19px;}
.box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 300px;
background: #111845a6;
box-sizing: border-box;
overflow: hidden;
box-shadow: 0 20px 50px rgb(23, 32, 90);
border: 2px solid #2a3cad;
color: white;
padding: 20px;
}
.box:before{
content: '';
position:absolute;
top:0;
left:-100%;
width:100%;
height:100%;
background: rgba(255,255,255,0.1);
transition:0.5s;
pointer-events: none;
}
.box:hover:before{
left:-50%;
transform: skewX(-5deg);
}
.box .content{
position:absolute;
top:15px;
left:15px;
right:15px;
bottom:15px;
border:1px solid #f0a591;
padding:20px;
text-align:center;
box-shadow: 0 5px 10px rgba(9,0,0,0.5);
}
.box span{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
box-sizing: border-box;
}
.box span:nth-child(1)
{
transform:rotate(0deg);
}
.box span:nth-child(2)
{
transform:rotate(90deg);
}
.box span:nth-child(3)
{
transform:rotate(180deg);
}
.box span:nth-child(4)
{
transform:rotate(270deg);
}
.box span:before
{
content: '';
position: absolute;
width:100%;
height: 2px;
background: #50dfdb;
animation: animate 4s linear infinite;
}
@keyframes animate {
0% {
transform:scaleX(0);
transform-origin: left;
}
50%
{
transform:scaleX(1);
transform-origin: left;
}
50.1%
{
transform:scaleX(1);
transform-origin: right;
}
100%
{
transform:scaleX(0);
transform-origin: right;
}
}
</style>
</head>
<body>
<a href="https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&cad=rja&uact=8&ved=2ahUKEwib0NqopqD4AhXFmeYKHTGVD1s4ChAWegQIAxAB&url=https%3A%2F%2Fwww.enationalelectronics.com%2F&usg=AOvVaw0CoGpfiGKRton9yE4Q8_Hv" target="_blank">
<section>
<div class="container">
<div class="background-img">
<div class="box">
<span></span>
<span></span>
<span></span>
<span></span>
<div class="content">
<h2>My animated Border </h2>
<p><a>All our modules are designed to play nicely with responsive of course. At the end of the day it comes down to the theme you use - our code doesn't get in your way.</a></p>
</div>
</div>
</div>
</div>
</section>
</a>
</body>
</html>7. Sass button border hover effect mixin
Made by Giana. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:700" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
.draw-border {
box-shadow: inset 0 0 0 4px #58afd1;
color: #58afd1;
transition: color 0.25s 0.0833333333s;
position: relative;
}
.draw-border::before, .draw-border::after {
border: 0 solid transparent;
box-sizing: border-box;
content: "";
pointer-events: none;
position: absolute;
width: 0;
height: 0;
bottom: 0;
right: 0;
}
.draw-border::before {
border-bottom-width: 4px;
border-left-width: 4px;
}
.draw-border::after {
border-top-width: 4px;
border-right-width: 4px;
}
.draw-border:hover {
color: #ffe593;
}
.draw-border:hover::before, .draw-border:hover::after {
border-color: #ffe593;
transition: border-color 0s, width 0.25s, height 0.25s;
width: 100%;
height: 100%;
}
.draw-border:hover::before {
transition-delay: 0s, 0s, 0.25s;
}
.draw-border:hover::after {
transition-delay: 0s, 0.25s, 0s;
}
.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;
}
.btn:focus {
outline: 2px dotted #55d7dc;
}
body {
background: #1f1a25;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
</style>
</head>
<body>
<button class="btn draw-border">Draw Border</button>
</body>
</html>8. Border animation (circle)
Made by Katmai. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<link href="//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css" rel="stylesheet">
<style>
html {
height: 100%;
}
body {
height: 100%;
background: #E94E3D;
}
.wrap {
margin: 100px auto;
width: 130px;
}
.circle {
position: relative;
overflow: hidden;
width: 120px;
height: 120px;
border-radius: 50%;
background: #E94E3D;
box-shadow: 60px -60px 0 2px #E94E3D, -60px -60px 0 2px #E94E3D, -60px 60px 0 2px #E94E3D, 60px 60px 0 2px #E94E3D, 0 0 0 2px #E94E3D;
}
.circle .icon {
position: absolute;
display: block;
color: #fff;
font-size: 20px;
}
.circle .i1 {
top: -25px;
left: 55px;
}
.circle .i2 {
top: 50px;
left: -20px;
}
.circle .i3 {
bottom: -25px;
left: 50px;
}
.circle .i4 {
top: 50px;
right: -30px;
}
.circle .line1,
.circle .line2 {
position: absolute;
top: 60px;
left: 60px;
border-top: 1px solid #fff;
transform: rotate(45deg);
transform-origin: 50% 50%;
}
.circle .line2 {
transform: rotate(-45deg);
}
.circle .text {
position: absolute;
top: 38px;
left: 30px;
width: 60px;
color: #fff;
text-align: center;
text-transform: uppercase;
font: 18px sans-serif;
transition: opacity 0.2s ease;
}
.circle:hover {
animation: border 0.4s ease 1 forwards;
cursor: none;
}
.circle:hover .text {
opacity: 0;
}
.circle:hover .line1,
.circle:hover .line2 {
animation: line 0.5s ease 0.45s forwards;
}
.circle:hover .i1 {
animation: icon1 0.5s ease 0.8s forwards;
}
.circle:hover .i2 {
animation: icon2 0.5s ease 0.9s forwards;
}
.circle:hover .i3 {
animation: icon3 0.5s ease 1s forwards;
}
.circle:hover .i4 {
animation: icon4 0.5s ease 1.1s forwards;
}
@keyframes border {
0% {
box-shadow: 60px -60px 0 2px #E94E3D, -60px -60px 0 2px #E94E3D, -60px 60px 0 2px #E94E3D, 60px 60px 0 2px #E94E3D, 0 0 0 2px #E94E3D;
}
25% {
box-shadow: 0 -125px 0 2px #E94E3D, -60px -60px 0 2px #E94E3D, -60px 60px 0 2px #E94E3D, 60px 60px 0 2px #E94E3D, 0 0 0 2px #fff;
}
50% {
box-shadow: 0 -125px 0 2px #E94E3D, -125px 0px 0 2px #E94E3D, -60px 60px 0 2px #E94E3D, 60px 60px 0 2px #E94E3D, 0 0 0 2px #fff;
}
75% {
box-shadow: 0 -125px 0 2px #E94E3D, -125px 0px 0 2px #E94E3D, 0px 125px 0 2px #E94E3D, 60px 60px 0 2px #E94E3D, 0 0 0 2px #fff;
}
100% {
box-shadow: 0 -125px 0 2px #E94E3D, -125px 0px 0 2px #E94E3D, 0px 125px 0 2px #E94E3D, 120px 40px 0 2px #E94E3D, 0 0 0 2px #fff;
}
}
@keyframes icon1 {
0% {
top: -25px;
}
100% {
top: 10px;
}
}
@keyframes icon2 {
0% {
left: -20px;
}
100% {
left: 15px;
}
}
@keyframes icon3 {
0% {
bottom: -25px;
}
100% {
bottom: 10px;
}
}
@keyframes icon4 {
0% {
right: -25px;
}
100% {
right: 15px;
}
}
@keyframes line {
0% {
left: 60px;
width: 0;
}
100% {
left: 10px;
width: 100px;
}
}
</style>
</head>
<body>
<div class="wrap">
<div class="circle">
<i class="icon i1 icon-terminal"></i>
<i class="icon i2 icon-code-fork"></i>
<i class="icon i3 icon-keyboard"></i>
<i class="icon i4 icon-code"></i>
<div class="line1"></div>
<div class="line2"></div>
<span class="text">hover on me</span>
</div>
</div>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>9. Gradient text border background Button With Animation
Made by Estebanane. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<style>
/* BY ESTEBAN MAUVAIS
[--=INDEX=--]
/BODY
/GRADIENTS
/GREEN
/PINK
/RED
/ORANGE
/BLUE
/BASE BUTTON
/ROTATE
[--=END INDEX=--]
*/
/*BODY*/
body {
font-family: 'Roboto', sans-serif;
}
body, .button:after {
background: #2c3e50;
}
.ctn {
display: block;
margin: auto;
text-align: center;
}
footer {
position: fixed;
bottom: 5px;
right: 5px;
color: #FFF;
}
footer a, footer a:after {
font-size: 1em !important;
}
/*END BODY*/
/*GRADIENTS*/
/*GREEN*/
.b-green, .b-green:before {
background: rgba(73,155,234,1);
background: -moz-linear-gradient(45deg, rgba(73,155,234,1) 0%, rgba(26,188,156,1) 100%);
background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(73,155,234,1)), color-stop(100%, rgba(26,188,156,1)));
background: -webkit-linear-gradient(45deg, rgba(73,155,234,1) 0%, rgba(26,188,156,1) 100%);
background: -o-linear-gradient(45deg, rgba(73,155,234,1) 0%, rgba(26,188,156,1) 100%);
background: -ms-linear-gradient(45deg, rgba(73,155,234,1) 0%, rgba(26,188,156,1) 100%);
background: linear-gradient(45deg, rgba(73,155,234,1) 0%, rgba(26,188,156,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea', endColorstr='#1abc9c', GradientType=1 );
}
/*PINK*/
.b-pink, .b-pink:before {
background: rgba(231,72,234,1);
background: -moz-linear-gradient(45deg, rgba(231,72,234,1) 0%, rgba(75,26,188,1) 100%);
background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(231,72,234,1)), color-stop(100%, rgba(75,26,188,1)));
background: -webkit-linear-gradient(45deg, rgba(231,72,234,1) 0%, rgba(75,26,188,1) 100%);
background: -o-linear-gradient(45deg, rgba(231,72,234,1) 0%, rgba(75,26,188,1) 100%);
background: -ms-linear-gradient(45deg, rgba(231,72,234,1) 0%, rgba(75,26,188,1) 100%);
background: linear-gradient(45deg, rgba(231,72,234,1) 0%, rgba(75,26,188,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e748ea', endColorstr='#4b1abc', GradientType=1 );
}
/*RED*/
.b-red, .b-red:before {
background: rgba(234,110,72,1);
background: -moz-linear-gradient(45deg, rgba(234,110,72,1) 0%, rgba(188,26,99,1) 100%);
background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(234,110,72,1)), color-stop(100%, rgba(188,26,99,1)));
background: -webkit-linear-gradient(45deg, rgba(234,110,72,1) 0%, rgba(188,26,99,1) 100%);
background: -o-linear-gradient(45deg, rgba(234,110,72,1) 0%, rgba(188,26,99,1) 100%);
background: -ms-linear-gradient(45deg, rgba(234,110,72,1) 0%, rgba(188,26,99,1) 100%);
background: linear-gradient(45deg, rgba(234,110,72,1) 0%, rgba(188,26,99,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea6e48', endColorstr='#bc1a63', GradientType=1 );
}
/*ORANGE*/
.b-orange, .b-orange:before {
background: rgba(255,193,7,1);
background: -moz-linear-gradient(45deg, rgba(255,193,7,1) 0%, rgba(255,87,34,1) 100%);
background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(255,193,7,1)), color-stop(100%, rgba(255,87,34,1)));
background: -webkit-linear-gradient(45deg, rgba(255,193,7,1) 0%, rgba(255,87,34,1) 100%);
background: -o-linear-gradient(45deg, rgba(255,193,7,1) 0%, rgba(255,87,34,1) 100%);
background: -ms-linear-gradient(45deg, rgba(255,193,7,1) 0%, rgba(255,87,34,1) 100%);
background: linear-gradient(45deg, rgba(255,193,7,1) 0%, rgba(255,87,34,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc107', endColorstr='#ff5722', GradientType=1 );
}
/*BLUE*/
.b-blue, .b-blue:before {
background: rgba(5,118,255,1);
background: -moz-linear-gradient(45deg, rgba(5,118,255,1) 0%, rgba(36,248,255,1) 100%);
background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(5,118,255,1)), color-stop(100%, rgba(36,248,255,1)));
background: -webkit-linear-gradient(45deg, rgba(5,118,255,1) 0%, rgba(36,248,255,1) 100%);
background: -o-linear-gradient(45deg, rgba(5,118,255,1) 0%, rgba(36,248,255,1) 100%);
background: -ms-linear-gradient(45deg, rgba(5,118,255,1) 0%, rgba(36,248,255,1) 100%);
background: linear-gradient(45deg, rgba(5,118,255,1) 0%, rgba(36,248,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0576ff', endColorstr='#24f8ff', GradientType=1 );
}
/*END GRADIENTS*/
/*BASE BUTTON*/
.button {
display: inline-block;
position: relative;
border-radius: 3px;
text-decoration: none;
padding: .5em;
margin: .5em;
font-size: 2em;
font-weight: bold;
transition: all .5s;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.button:hover {
text-shadow: 0px 0px 0px rgba(255, 255, 255, .75);
}
.button:hover:after {
left: 100%;
top: 100%;
bottom: 100%;
right: 100%;
}
.button:before {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: -1;
border-radius: 5px;
transition: all .5s;
}
.button:after {
content: '';
display: block;
position: absolute;
left: 2px;
top: 2px;
bottom: 2px;
right: 2px;
z-index: -1;
border-radius: 5px;
transition: all .5s;
}
.button2 {
display: inline-block;
font-size: 2em;
margin: .5em;
padding: .5em;
border-radius: 5px;
transition: all .5s;
filter: hue-rotate(0deg);
color: #FFF;
text-decoration: none;
}
/*END BASE BUTTON*/
/*ROTATE*/
.rot-360-noscoop:hover {
filter: hue-rotate(360deg);
transform: rotate(360deg);
}
.rot-135:hover {
filter: hue-rotate(135deg);
}
.rot-90:hover {
filter: hue-rotate(90deg);
}
/*END ROTATE*/
</style>
</head>
<body>
<link href="https://fonts.googleapis.com/css?family=Roboto:100" rel="stylesheet">
<div class="ctn">
<a href="http://themonkey.co" class="button b-green">Green Button</a>
<a href="http://themonkey.co" class="button b-pink">Pink Button</a>
<a href="http://themonkey.co" class="button b-red">Red Button</a>
<a href="http://themonkey.co" class="button b-orange">Orange Button</a>
<a href="http://themonkey.co" class="button b-blue">Blue Button</a>
<br/>
<a href="http://themonkey.co" class="button2 b-green rot-135">Green button</a>
<a href="http://themonkey.co" class="button2 b-pink rot-135">Pink button</a>
<a href="http://themonkey.co" class="button2 b-red rot-135">Red button</a>
<a href="http://themonkey.co" class="button2 b-orange rot-135">Orange button</a>
<a href="http://themonkey.co" class="button2 b-blue rot-135">Blue button</a>
</div>
<footer><a href="http://themonkey.co" class="button b-red" target="_blank">By Monkey Company</a></footer>
</body>
</html>10. Rotating border
Made by Jesse B. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
*, *::before, *::after {
box-sizing: border-box;
}
@-webkit-keyframes rotate {
100% {
transform: rotate(1turn);
}
}
@keyframes rotate {
100% {
transform: rotate(1turn);
}
}
.rainbow {
position: relative;
z-index: 0;
width: 400px;
height: 300px;
border-radius: 10px;
overflow: hidden;
padding: 2rem;
}
.rainbow::before {
content: "";
position: absolute;
z-index: -2;
left: -50%;
top: -50%;
width: 200%;
height: 200%;
background-color: #399953;
background-repeat: no-repeat;
background-size: 50% 50%, 50% 50%;
background-position: 0 0, 100% 0, 100% 100%, 0 100%;
background-image: linear-gradient(#399953, #399953), linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33), linear-gradient(#377af5, #377af5);
-webkit-animation: rotate 4s linear infinite;
animation: rotate 4s linear infinite;
}
.rainbow::after {
content: "";
position: absolute;
z-index: -1;
left: 6px;
top: 6px;
width: calc(100% - 12px);
height: calc(100% - 12px);
background: white;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="rainbow">
Rainbow border
</div>
</body>
</html>11. Input Field Gradient Border Focus Fun
Made by Rik Schennink. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
.input {
position: relative;
font-size: 1.5em;
background: linear-gradient(21deg, #10abff, #1beabd);
padding: 3px;
display: inline-block;
border-radius: 9999em;
}
.input *:not(span) {
position: relative;
display: inherit;
border-radius: inherit;
margin: 0;
border: none;
outline: none;
padding: 0 0.325em;
z-index: 1;
}
.input *:not(span):focus + span {
opacity: 1;
transform: scale(1);
}
.input span {
transform: scale(0.993, 0.94);
transition: transform 0.5s, opacity 0.25s;
opacity: 0;
position: absolute;
z-index: 0;
margin: 4px;
left: 0;
top: 0;
right: 0;
bottom: 0;
border-radius: inherit;
pointer-events: none;
box-shadow: inset 0 0 0 3px #fff, 0 0 0 4px #fff, 3px -3px 30px #1beabd, -3px 3px 30px #10abff;
}
html {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
line-height: 1.5;
font-size: 1em;
}
body {
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
html, body {
height: 100%;
}
input {
font-family: inherit;
line-height: inherit;
color: #2e3750;
min-width: 12em;
}
::-moz-placeholder {
color: #cbd0d5;
}
:-ms-input-placeholder {
color: #cbd0d5;
}
::placeholder {
color: #cbd0d5;
}
html::after {
content: "";
background: linear-gradient(21deg, #10abff, #1beabd);
height: 3px;
width: 100%;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<p>
<span class="input">
<input type="text" placeholder="Gradient border focus fun">
<span></span>
</span>
</p>
</body>
</html>12. Map-inspired border (single element + CSS)
Made by Stephy. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Libre+Baskerville|Marcellus'>
<style>
* {
box-sizing: border-box;
}
html, body {
height: 100vh;
}
body {
display: flex;
align-items: center;
justify-content: center;
background: #563f0e;
padding: 50px;
}
.box {
padding: 60px;
max-width: 650px;
background: #80d5a6;
border: 5px dashed mediumseagreen;
box-shadow: 0 0 0 2.5px #226741, 0 0 0 12.5px #fff, inset 0 0 0 2.5px #226741, 0 5px 10px 15px rgba(0, 0, 0, 0.5), inset 0 0 0 6px #fff, inset 0 0 100vw 100vw beige;
color: mediumseagreen;
font-family: Marcellus, serif;
font-size: 3em;
text-shadow: 0 2px #fff;
text-align: center;
}
</style>
</head>
<body>
<div class="box">
Map-inspired border effect using stacked border & box-shadows
</div>
</body>
</html>