Line Button Hover Effects

Developer
Kyle Brumm
Size
3,930 Kb
Views
6,072
  1. Line Button Hover Effects Previews
  2. Line Button Hover Effects HTML Codes
  3. Line Button Hover Effects CSS Codes

How do I make an line button hover effects?

Some button hover effects using psuedo elements.. What is a line button hover effects? How do you make a line button hover effects? This script and codes were developed by Kyle Brumm on 07 January 2023, Saturday.

Line Button Hover Effects Previews
IQ Test

Line Button Hover Effects - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Line Button Hover Effects</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <h1>Line Button<br>Hover Effects</h1> <h4>By: <a href="http://kylebrumm.com" target="_blank">Kyle Brumm</a></h4> <div class="col"> <a href="#" class="btn btn-1 btn--cw"> <code class="btn--inner">.btn--cw</code> </a> </div> <div class="col"> <a href="#" class="btn btn-2 btn--ccw"> <code class="btn--inner">.btn--ccw</code> </a> </div> <div class="col"> <a href="#" class="btn btn-3 btn--tlbr"> <code class="btn--inner">.btn--tlbr</code> </a> </div> <div class="col"> <a href="#" class="btn btn-4 btn--trbl"> <code class="btn--inner">.btn--trbl</code> </a> </div> <div class="col"> <a href="#" class="btn btn-5 btn--cw-tlbr"> <code class="btn--inner">.btn--cw-tlbr</code> </a> </div> <div class="col"> <a href="#" class="btn btn-6 btn--ccw-tlbr"> <code class="btn--inner">.btn--ccw-tlbr</code> </a> </div> <div class="col"> <a href="#" class="btn btn-7 btn--cw-trbl"> <code class="btn--inner">.btn--cw-trbl</code> </a> </div> <div class="col"> <a href="#" class="btn btn-8 btn--ccw-trbl"> <code class="btn--inner">.btn--ccw-trbl</code> </a> </div>
</div>
</body>
</html>

Line Button Hover Effects - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400|Raleway:300);
*,
*:before,
*:after { box-sizing: border-box;
}
html { font-family: 'Open Sans', Helvetica, arial, sans-serif; background-color: #eeeeee;
}
h1, h2, h3,
h4, h5, h6 { font-family: 'Raleway', 'Open Sans', sans-serif;
}
a { text-decoration: none; color: black;
}
.container { overflow: hidden; width: 100%; max-width: 500px; margin: 0 auto; padding: 2rem 1rem; text-align: center;
}
.col { padding: 1rem;
}
@media (min-width: 500px) { .col { width: 50%; float: left; } .col:nth-of-type(2n+1) { clear: left; }
}
.btn-1 { color: #59694c !important;
}
.btn-2 { color: #544753 !important;
}
.btn-3 { color: #559f6f !important;
}
.btn-4 { color: #77784f !important;
}
.btn-5 { color: #5f8244 !important;
}
.btn-6 { color: #3f93a5 !important;
}
.btn-7 { color: #80a674 !important;
}
.btn-8 { color: #535868 !important;
}
.btn { display: block; position: relative; overflow: hidden; padding: 1.5rem; text-decoration: none;
}
.btn:before, .btn:after,
.btn .btn--inner:before,
.btn .btn--inner:after { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 0; background-color: currentColor; -webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out;
}
.btn--cw:after,
.btn--ccw:after,
.btn--cw-tlbr:after,
.btn--ccw-tlbr:after,
.btn--cw-trbl:after,
.btn--ccw-trbl:after { top: auto; right: 0; bottom: 0; left: auto;
}
.btn--cw .btn--inner:before,
.btn--ccw .btn--inner:before,
.btn--cw-tlbr .btn--inner:before,
.btn--ccw-tlbr .btn--inner:before,
.btn--cw-trbl .btn--inner:before,
.btn--ccw-trbl .btn--inner:before { right: 0; left: auto;
}
.btn--cw .btn--inner:after,
.btn--ccw .btn--inner:after,
.btn--cw-tlbr .btn--inner:after,
.btn--ccw-tlbr .btn--inner:after,
.btn--cw-trbl .btn--inner:after,
.btn--ccw-trbl .btn--inner:after { top: auto; bottom: 0;
}
.btn--cw:before, .btn--cw:after { width: 0; height: 2px;
}
.btn--cw .btn--inner:before,
.btn--cw .btn--inner:after { width: 2px; height: 0;
}
.btn--cw:hover:before, .btn--cw:hover:after { width: 100%;
}
.btn--cw:hover .btn--inner:before,
.btn--cw:hover .btn--inner:after { height: 100%;
}
.btn--ccw:before, .btn--ccw:after { width: 2px; height: 0;
}
.btn--ccw .btn--inner:before,
.btn--ccw .btn--inner:after { width: 0; height: 2px;
}
.btn--ccw:hover:before, .btn--ccw:hover:after { height: 100%;
}
.btn--ccw:hover .btn--inner:before,
.btn--ccw:hover .btn--inner:after { width: 100%;
}
.btn--tlbr:before, .btn--tlbr:after { width: 0; height: 2px;
}
.btn--tlbr:after,
.btn--tlbr .btn--inner:after { top: auto; right: 0; bottom: 0; left: auto;
}
.btn--tlbr .btn--inner:before,
.btn--tlbr .btn--inner:after { width: 2px; height: 0;
}
.btn--tlbr:hover:before, .btn--tlbr:hover:after { width: 100%;
}
.btn--tlbr:hover .btn--inner:before,
.btn--tlbr:hover .btn--inner:after { height: 100%;
}
.btn--trbl:before, .btn--trbl:after { width: 0; height: 2px;
}
.btn--trbl:before,
.btn--trbl .btn--inner:before { right: 0; left: auto;
}
.btn--trbl:after,
.btn--trbl .btn--inner:after { top: auto; bottom: 0;
}
.btn--trbl .btn--inner:before,
.btn--trbl .btn--inner:after { width: 2px; height: 0;
}
.btn--trbl:hover:before, .btn--trbl:hover:after { width: 100%;
}
.btn--trbl:hover .btn--inner:before,
.btn--trbl:hover .btn--inner:after { height: 100%;
}
.btn--cw-tlbr:before, .btn--cw-tlbr:after,
.btn--cw-tlbr .btn--inner:before,
.btn--cw-tlbr .btn--inner:after,
.btn--ccw-tlbr:before,
.btn--ccw-tlbr:after,
.btn--ccw-tlbr .btn--inner:before,
.btn--ccw-tlbr .btn--inner:after,
.btn--cw-trbl:before,
.btn--cw-trbl:after,
.btn--cw-trbl .btn--inner:before,
.btn--cw-trbl .btn--inner:after,
.btn--ccw-trbl:before,
.btn--ccw-trbl:after,
.btn--ccw-trbl .btn--inner:before,
.btn--ccw-trbl .btn--inner:after { -webkit-transition: 0.15s ease-in-out; transition: 0.15s ease-in-out;
}
.btn--cw-tlbr:before, .btn--cw-tlbr:after { width: 0; height: 2px; -webkit-transition-delay: 0.15s; transition-delay: 0.15s;
}
.btn--cw-tlbr .btn--inner:before,
.btn--cw-tlbr .btn--inner:after { width: 2px; height: 0; -webkit-transition-delay: 0s; transition-delay: 0s;
}
.btn--cw-tlbr:hover:before, .btn--cw-tlbr:hover:after { width: 100%; -webkit-transition-delay: 0s; transition-delay: 0s;
}
.btn--cw-tlbr:hover .btn--inner:before,
.btn--cw-tlbr:hover .btn--inner:after { height: 100%; -webkit-transition-delay: 0.15s; transition-delay: 0.15s;
}
.btn--ccw-tlbr:before, .btn--ccw-tlbr:after { width: 2px; height: 0; -webkit-transition-delay: 0.15s; transition-delay: 0.15s;
}
.btn--ccw-tlbr .btn--inner:before,
.btn--ccw-tlbr .btn--inner:after { width: 0; height: 2px; -webkit-transition-delay: 0s; transition-delay: 0s;
}
.btn--ccw-tlbr:hover:before, .btn--ccw-tlbr:hover:after { height: 100%; -webkit-transition-delay: 0s; transition-delay: 0s;
}
.btn--ccw-tlbr:hover .btn--inner:before,
.btn--ccw-tlbr:hover .btn--inner:after { width: 100%; -webkit-transition-delay: 0.15s; transition-delay: 0.15s;
}
.btn--cw-trbl:before, .btn--cw-trbl:after { width: 0; height: 2px; -webkit-transition-delay: 0s; transition-delay: 0s;
}
.btn--cw-trbl .btn--inner:before,
.btn--cw-trbl .btn--inner:after { width: 2px; height: 0; -webkit-transition-delay: 0.15s; transition-delay: 0.15s;
}
.btn--cw-trbl:hover:before, .btn--cw-trbl:hover:after { width: 100%; -webkit-transition-delay: 0.15s; transition-delay: 0.15s;
}
.btn--cw-trbl:hover .btn--inner:before,
.btn--cw-trbl:hover .btn--inner:after { height: 100%; -webkit-transition-delay: 0s; transition-delay: 0s;
}
.btn--ccw-trbl:before, .btn--ccw-trbl:after { width: 2px; height: 0; -webkit-transition-delay: 0s; transition-delay: 0s;
}
.btn--ccw-trbl .btn--inner:before,
.btn--ccw-trbl .btn--inner:after { width: 0; height: 2px; -webkit-transition-delay: 0.15s; transition-delay: 0.15s;
}
.btn--ccw-trbl:hover:before, .btn--ccw-trbl:hover:after { height: 100%; -webkit-transition-delay: 0.15s; transition-delay: 0.15s;
}
.btn--ccw-trbl:hover .btn--inner:before,
.btn--ccw-trbl:hover .btn--inner:after { width: 100%; -webkit-transition-delay: 0s; transition-delay: 0s;
}
Line Button Hover Effects - Script Codes
Line Button Hover Effects - Script Codes
Home Page Home
Developer Kyle Brumm
Username kjbrum
Uploaded January 07, 2023
Rating 4.5
Size 3,930 Kb
Views 6,072
Do you need developer help for Line Button Hover Effects?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kyle Brumm (kjbrum) Script Codes
Name
_toolbox.scss
Stacked Cards Hover Effects
Vue.js Lazy Loading
Reactive Dot Grid - Canvas
Simple Tabs Concept
Stylish Brand Buttons
3D Orbiting Split Images
SVG Hover Animations
Wavy Loading Animations
_juice.scss
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!