Self-Responsive Social Buttons

Developer
Tommy Hodgins
Size
2,016 Kb
Views
34,408
  1. Self-Responsive Social Buttons Previews
  2. Self-Responsive Social Buttons HTML Codes
  3. Self-Responsive Social Buttons CSS Codes

How do I make an self-responsive social buttons?

What is a self-responsive social buttons? How do you make a self-responsive social buttons? This script and codes were developed by Tommy Hodgins on 12 July 2022, Tuesday.

Self-Responsive Social Buttons Previews
IQ Test

Self-Responsive Social Buttons - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Self-Responsive Social Buttons</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section data-social> <a href=# class="ion-social-facebook"><span>Facebook</span></a>
</section>
<section data-social> <a href=# class="ion-social-twitter"><span>Twitter</span></a> <a href=# class="ion-social-youtube"><span>Youtube</span></a>
</section>
<section data-social> <a href=# class="ion-social-facebook"><span>Facebook</span></a> <a href=# class="ion-social-twitter"><span>Twitter</span></a> <a href=# class="ion-social-youtube"><span>Youtube</span></a>
</section>
<section data-social> <a href=# class="ion-social-facebook"><span>Facebook</span></a> <a href=# class="ion-social-twitter"><span>Twitter</span></a> <a href=# class="ion-social-youtube"><span>Youtube</span></a> <a href=# class="ion-social-linkedin"><span>LinkedIN</span></a>
</section> <script src='https://cdnjs.cloudflare.com/ajax/libs/eqcss/1.2.2/EQCSS.min.js'></script>
</body>
</html>

Self-Responsive Social Buttons - Script Codes CSS Codes

* { box-sizing: border-box;
}
[data-social] { margin: 1em auto;
}
[data-social]:after { content: ''; display: block; clear: both;
}
[data-social] a { display: inline-block; font-family: sans-serif; line-height: 1; padding: .5em; float: left; color: white; font-size: 20pt; min-width: 1em; text-align: center; text-decoration: none; transition: opacity .2s ease-in-out;
}
[data-social] a:focus,
[data-social] a:hover { opacity: .7;
}
[data-social] a span { margin-left: .5em;
}
[data-social] [class*=facebook] { background: #3b5998;
}
[data-social] [class*=twitter] { background: #2caae1;
}
[data-social] [class*=youtube] { background: #cb2027;
}
[data-social] [class*=linkedin] { background: #007bb6;
}
[data-social] a:nth-of-type(n+2) { margin-left: .5em;
}
@element '[data-social] a' and (max-width: 15em) { $this span { display: none; }
}
@element '[data-social] a' { $this { width: calc(eval('100 / parentNode.children.length')% - .5em + eval('.5 / parentNode.children.length')em); }
}
Self-Responsive Social Buttons - Script Codes
Self-Responsive Social Buttons - Script Codes
Home Page Home
Developer Tommy Hodgins
Username tomhodgins
Uploaded July 12, 2022
Rating 4.5
Size 2,016 Kb
Views 34,408
Do you need developer help for Self-Responsive Social Buttons?

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!

Tommy Hodgins (tomhodgins) Script Codes
Name
Amazing Reviews
A Parent Selector for CSS
Matching height via EH units
Highlighted Search Term
Using JavaScript variables in CSS
Responsive Scrolling Sticky Header
Alternating Blockquotes
Element Query Demo with EQCSS
CSS Parent Selector
Responsive Pagination
Create amazing blog posts 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!