Scss animated button
How do I make an scss animated button?
Inspired by Mary Lou http://tympanus.net/Tutorials/CircleHoverEffects/this is just a version of the button i created with a few subtle differences using scss/compass. What is a scss animated button? How do you make a scss animated button? This script and codes were developed by Nicholas M. Smith on 27 August 2022, Saturday.
Scss animated button - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>scss animated button</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="page-wrap">
<div class="contain-lynch contain-lynch-bkground"> <div class="info-lynch"> <h3>David Lynch</h3> <div class="border"></div> <p>A bad cup of coffee is better than no coffee at all</p> <div class="button"><a href="#" class="click">BIO</a></div> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Scss animated button - Script Codes CSS Codes
.page-wrap { margin: 20px auto; width: 300px; height: 300px;
}
.contain-lynch { width: 300px; height: 300px; overflow: hidden; position: relative; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; cursor: default; margin: 0 0 20px 0; box-shadow: inset 0 0 0 16px rgba(255, 255, 255, 0.6); -moz-box-shadow: inset 0 0 0 16px rgba(255, 255, 255, 0.6); -webkit-box-shadow: inset 0 0 0 16px rgba(255, 255, 255, 0.6); -ms-box-shadow: inset 0 0 0 16px rgba(255, 255, 255, 0.6); -o-box-shadow: inset 0 0 0 16px rgba(255, 255, 255, 0.6); transition: all 0.4s ease-in-out 0s; -moz-transition: all 0.4s ease-in-out 0s; -webkit-transition: all 0.4s ease-in-out 0s; -ms-transition: all 0.4s ease-in-out 0s; -o-transition: all 0.4s ease-in-out 0s; border: 5px solid #000;
}
.contain-lynch-bkground { background: transparent url(http://images.amcnetworks.com/ifc.com/wp-content/uploads/2011/01/012411_DavidLynch.jpg) no-repeat; background-position: center center;
}
.info-lynch { margin: 0 auto; position: absolute; background: #ccc; width: inherit; height: inherit; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; overflow: hidden; opacity: 0; -moz-opacity: 0; -webkit-opacity: 0; -ms-opacity: 0; -o-opacity: 0; transition: all 0.4s ease-in-out 0s; -moz-transition: all 0.4s ease-in-out 0s; -webkit-transition: all 0.4s ease-in-out 0s; -ms-transition: all 0.4s ease-in-out 0s; -o-transition: all 0.4s ease-in-out 0s; transform: rotate(-180deg); -moz-transform: rotate(-180deg); -webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); -o-transform: rotate(-180deg); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); -moz-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); -ms-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); -o-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.info-lynch h3 { color: #000; text-transform: uppercase; letter-spacing: 2px; font-size: 1.5em; font-weight: bold; margin: 50px 30px 30px 60px; padding: 45px 0 0 0; font-family: Helvetica; text-shadow: 0 1px 2px #fff; -moz-text-shadow: 0 1px 2px #fff; -webkit-text-shadow: 0 1px 2px #fff; -o-text-shadow: 0 1px 2px #fff; -ms-text-shadow: 0 1px 2px #fff;
}
.info-lynch p { color: #000; padding: 10px 5px; font-style: italic; margin: 20px 60px; font-size: 0.9em; line-height: 1.2em; text-align: center; opacity: 0; -moz-opacity: 0; -webkit-opacity: 0; -ms-opacity: 0; -o-opacity: 0; transition: all 1s ease-in-out 0.4s; -moz-transition: all 1s ease-in-out 0.4s; -webkit-transition: all 1s ease-in-out 0.4s; -ms-transition: all 1s ease-in-out 0.4s; -o-transition: all 1s ease-in-out 0.4s;
}
.info-lynch a.click { color: #000; font-style: italic; font-size: 0.8em; text-decoration: none; margin: 70px 0; padding: 12px 8px; outline: none; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; background: #999; transition: all 1s ease-in-out 0.5s; -moz-transition: all 1s ease-in-out 0.5s; -webkit-transition: all 1s ease-in-out 0.5s; -ms-transition: all 1s ease-in-out 0.5s; -o-transition: all 1s ease-in-out 0.5s;
}
.border { margin: 0 auto; text-align: center; content: ""; height: 1px; width: 200px; border-top: 1px solid #000;
}
.button { position: absolute; top: 150px; left: -300px; margin: 0 auto; width: inherit; height: inherit; transition: all 1s ease-in-out 0.4s; -moz-transition: all 1s ease-in-out 0.4s; -webkit-transition: all 1s ease-in-out 0.4s; -ms-transition: all 1s ease-in-out 0.4s; -o-transition: all 1s ease-in-out 0.4s;
}
.contain-lynch:hover { box-shadow: inset 0 0 0 200px rgba(255, 255, 255, 0.1); -moz-box-shadow: inset 0 0 0 200px rgba(255, 255, 255, 0.1); -webkit-box-shadow: inset 0 0 0 200px rgba(255, 255, 255, 0.1); -ms-box-shadow: inset 0 0 0 200px rgba(255, 255, 255, 0.1); -o-box-shadow: inset 0 0 0 200px rgba(255, 255, 255, 0.1);
}
.contain-lynch:hover .info-lynch { width: inherit; height: inherit; transform: scale(1); -moz-transform: scale(1); -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); opacity: 0.9; -moz-opacity: 0.9; -webkit-opacity: 0.9; -ms-opacity: 0.9; -o-opacity: 0.9;
}
.contain-lynch:hover .info-lynch p { opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; -ms-opacity: 1; -o-opacity: 1;
}
.contain-lynch:hover .button { width: inherit; height: inherit; top: 145px; left: 130px;
}
Scss animated button - Script Codes JS Codes
/* inspired by Mary Lou
http://tympanus.net/Tutorials/CircleHoverEffects/
this is just a version of the button i created.
Developer | Nicholas M. Smith |
Username | icutpeople |
Uploaded | August 27, 2022 |
Rating | 4.5 |
Size | 4,096 Kb |
Views | 30,360 |
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!
Name | Size |
Flip Navicon | 2,701 Kb |
Wordpress 3.8 loader | 2,083 Kb |
Pure CSS Minecraft Enderman | 4,258 Kb |
Animated Image Hovers | 3,687 Kb |
Hover Effects | 3,521 Kb |
Loader | 2,786 Kb |
CSS Modal | 2,836 Kb |
Floating Labels Form | 3,113 Kb |
CSS Off Canvas Menu | 5,143 Kb |
CSS 8-Bit Box Shadow DuckTales | 4,376 Kb |
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!
Name | Username | Size |
Pink expansion tunnel | Vez | 1,738 Kb |
Rotate Demo | Agelber | 3,061 Kb |
Apple website | Jds317 | 1,835 Kb |
Canvas Orbital Trails v2 | Jackrugile | 3,421 Kb |
Dragonball Dragon Radar | DouglasGlover | 2,157 Kb |
Animated SVG stroke-dasharray | Netsi1964 | 3,179 Kb |
A Pen by Theun | Tjoen | 6,152 Kb |
Portfolio Page | KaylaMT | 1,983 Kb |
A Pen by Rob Levin | Roblevin | 2,787 Kb |
Midterm dry run | Jds317 | 1,649 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!