frontend-coder

Button Hover Effects

Some button hover effects using psuedo elements and borders.

A Pen by Kyle Brumm on CodePen.

License.

frontend-coder

	//E-mail Ajax Send
	$("form").submit(function() { //Change
const name      = $("#name").val().trim();
const email     = $("#email").val().trim();
const subgect   = $("#subgect").val().trim();
const message   = $("#message").val().trim();
const asdActive = document.getElementById('asdActive');
if(asdActive.checked ) {

frontend-coder

{
  "bracket-pair-colorizer-2.colors": [
    "#E74C3C",
    "#F1C40F",
    "#00FFFF",
    "#00FF00",
    "#FF4500",
    "#B71C1C",
    "#2E7D32",
    "#BF360C",

frontend-coder

{
  "workbench.colorTheme": "Cobalt2",
  "editor.fontFamily": "Operator Mono, Menlo, Monaco, 'Courier New', monospace",
  //  "editor.fontFamily": "Hack",
  //   "editor.fontFamily": "Opens Sans",
  "editor.fontSize": 18,
  "editor.lineHeight": 25,
  "editor.mouseWheelZoom": true,
  "editor.letterSpacing": 0.5,
  "files.trimTrailingWhitespace": true,

frontend-coder

<nav class="menu">
    <header>Menu <span>×</span></header>
    <ol>
        <li class="menu-item"><a href="#0">Home</a></li>
        <li class="menu-item"><a href="#0">About</a></li>
        <li class="menu-item">
            <a href="#0">Widgets</a>
            <ol class="sub-menu">
                <li class="menu-item"><a href="#0">Grocerry</a></li>
                <li class="menu-item"><a href="#0">Discount</a></li>

frontend-coder

/* Large Devices, Wide Screens  */
@media only screen and (max-width : 1200) {

}

/* Medium Devices Desktops  */
@media only screen and (max-width : 992) {

}

frontend-coder

<div id="accordian">
	<ul>
		<li class="active">
			<h3>Asset Finance<span class="icon-arrow"></span></h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>
		</li>
		<li>
			<h3>Commercial litigation and arbitration<span class="icon-arrow"></span></h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. N

frontend-coder

<div>
  <div class="acc-btn">Button 1</div>
  <div class="acc-content">
    Content 1
  </div>
</div>
<div>
  <div class="acc-btn">Button 2</div>
  <div class="acc-content show">
    Content 2

frontend-coder

      <div class="checkbox_box">
       <label class="ans-label ng-binding">
        <input id="asdActive" type="checkbox" class="checkbox square">
        &nbsp;Show Active Only
       </label>
      </div>

frontend-coder

     const checkStickyMenu = function() {
         if ($(window).scrollTop() > $("#about").offset().top){
              $(".top_line").addClass("top_line_active");
              $(".top_line_box").addClass("top_line_box_active");
         }
         else {
                 $(".top_line").removeClass("top_line_active");
                 $(".top_line_box").remove("top_line_box_active");