Added new link buttons.

Developer
Ty Strong
Size
5,025 Kb
Views
44,528
  1. Added new link buttons. Previews
  2. Added new link buttons. HTML Codes
  3. Added new link buttons. CSS Codes

How do I make an added new link buttons.?

Looking for feedback on these new buttons. What do you think?. What is a added new link buttons.? How do you make a added new link buttons.? This script and codes were developed by Ty Strong on 11 August 2022, Thursday.

Added new link buttons. Previews
IQ Test

Added new link buttons. - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Added new link buttons.</title> <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <p class="home">Hello! My name is</p>
<h1>Ty Strong</h1>
<div class="home-circle"></div>
<!--
<div class="nav"> <a href="index.html"><div>Home</div></a> <a href="portfolio.html"><div>Portfolio</div></a> <a href="blog.html"><div>Blog</div></a> <a href="contact.html"><div>Contact</div></a>
</div>
-->
<h2 class="hidden">Web Developer</h2>
<span class="hidden">&amp</span>
<h2 class="hidden">Graphic Designer</h2>
<p>I'm a web developer from <dfn title="Born in Indiana, Currently in Monroe, OH.">Ohio</dfn> with a passion for perfection. I am a tireless seeker of knowledge and love the logic and structure of coding. I always strive to write elegant and efficient code, whether it be HTML, CSS or Javascript. My eye for design not only allows me to build beautiful responsive websites, but also allows me to be flexible and adaptable. When I'm not pushing pixels, I'm attending classes at <dfn title="Currently a PSEO student at Miami, I plan to attend OSU.">Miami University</dfn> or kicking a hackysack.</p>
<p>Specialties: HTML5; CSS3; CSS (Cascading Style Sheets); Apache Server, PHP, MySQL, FTP, SSH - Custom Themes / Templates for Drupal, Wordpress; Adobe Dreamweaver, Fireworks, Illustrator; Web Applications; Graphic Media; Logo Design; SEO (Search Engine Optimization); Web Development; Programming in JavaScript, AJAX; Dynamic Database Driven Websites; Web Hosting; XML; XHTML, Web 2.0, Web 3.0; Joomla, Drupal, and WordPress.</p>
<!--
<p>Find some of my experiments on <a href="http://codepen.com/spikeyty">CodePen</a>, find my personal nerdy stuff on <a href="https://twitter.com/TyBpa">Twitter</a>, or contact me directly at <a href="mailto:[email protected]">[email protected]</a>. Download my rèsumè at <a href="#">this link</a>.</p>
-->
<!--
<div class="links"> <a href="#"><span>Dev Questions</span><i class="fa fa-file-text"></i></a> <a href="#"><span>Social Media</span><i class="fa fa-comments"></i></a> <a href="#"><span>My Experiments</span><i class="fa fa-code"></i></a> <a href="#"><span>Contact Me</span><i class="fa fa-envelope"></i></a>
</div>
-->
<div class="links"> <a href="#"><i class="fa fa-file-text"></i><span>Dev Questions</span></a> <a href="#"><i class="fa fa-briefcase"></i><span>Previous Work</span></a> <a href="#"><i class="fa fa-code"></i><span>My Experiments</span></a> <a href="#"><i class="fa fa-envelope"></i><span>Contact Me</span></a>
</div>
<footer>&copy;2014 Ty Strong <a href="mailto:[email protected]">| [email protected]</a></footer> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Added new link buttons. - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Open+Sans:700,400,300);
::-moz-selection { background: rgba(0,0,0,0.2); }
::selection { background: rgba(0,0,0,0.2); }
body { background: #07a; background: -webkit-linear-gradient(left,#07a, #0aa, #07a); background: -o-linear-gradient(right,#07a, #0aa, #07a); background: -moz-linear-gradient(right,#07a, #0aa, #07a); background: linear-gradient(to right,#07a, #0aa, #07a); background-size: 200%; background-position: 0%; font-family: 'Open Sans', sans-serif; font-size: 1em; margin: 1.5em 4em 0; color: #f5f5f5; animation: bg-move 10s linear infinite; -webkit-animation: bg-move 10s linear infinite;
}
h1 { font-size: 3.5em; text-align: center; margin: -.1em 0 1em; font-weight: 700;
}
h2 { font-size: 3em; text-align: center; margin: -.1em 0 1em;
}
.circle, .home-circle { position: relative; margin: 0 auto 3em; height: 9em; width: 9em; border-radius: 50%; background: #999 url(http://s3-us-west-2.amazonaws.com/s.cdpn.io/42863/profile/profile-512_5.jpg) 80% 0%; background-size: 10em 10em; box-shadow: 0 0 0 0.8em rgba(255,255,255,0.3);
}
.circle { margin: -2.5em auto 0; height: 4em; width: 4em; background: #999 url(http://s3-us-west-2.amazonaws.com/s.cdpn.io/42863/profile/profile-512_5.jpg) 70% 0%; background-size: 4.5em 4.5em; box-shadow: 0 0 0 0.4em rgba(255,255,255,0.3);
}
.home-circle:before, .home-circle:after, .circle:before, .circle:after { position: absolute; content: 'Web Developer'; width: 8.5em; font-size: 1.7em; top: 2em; right: 6em; font-weight: 700;
}
.circle:before, .circle:after { font-size: 1.2em; top: 1em; right: 4em;
}
.circle:after, .home-circle:after { content: 'Graphic Designer'; left: 7.25em;
}
.circle:after { left: 5em;
}
.nav { margin: -10px auto; height: 3em; width: 30.3em;
}
.nav div { text-align: center; text-shadow: 0 0 7px rgba(0,0,0,0.3); font-size: 1.2em; line-height: 2em; height: 2em; padding: 0 1em; margin: 0 10px; background: rgba(0,0,0,0.3); border:solid 3px transparent; border-radius: 4px; opacity: 1; transition: all 500ms; float: left;
}
.nav div:hover { border:solid 3px #fff;
}
p.home { max-width: 9999em; text-align: center; margin: 3em 0 0; -webkit-animation: none; animation: none;
}
p.home:before { display: none;
}
p:before { content: ''; display: block; max-width: 49em; width: 80%; height: 1px; background: rgba(0,0,0,0.3); border-bottom: solid 1px rgba(255,255,255,0.3); margin: 2.5em auto 10px;
}
p { background: transparent; line-height: 1.5; margin: 1.4em auto; max-width: 49em; font-size: 1.3em; font-weight: 300; animation: slide-in 1s ease-out; -webkit-animation: slide-in 1s ease-out;
}
dfn { border-bottom: dotted 1px rgba(0,0,0,0.4); cursor: help; font-style: normal;
}
/** a { color: #fff; border-bottom: solid 1px rgba(0,0,0,0.4); text-decoration: none;
} **/
h2.hidden { display: none; font-weight: 400; font-size: 1.8em; text-align: center;
}
span.hidden { display: none; font-size: 1em; margin: -1.75em auto 0; text-align: center;
}
.links { max-width: 50em; height: 10em; margin: 30px auto; /** margin-top: -3em; **/
}
a {text-decoration: none;}
.links a { width: 10em; float: left; margin: 0 1.58em; color: #fff; text-align: center;
}
.links a span { line-height: 3em; font-size: 1.2em; display: block; font-weight: 700;
}
a:nth-child(1) {margin-left: 0;}
a:nth-child(4) {margin-right: 0;}
a i { display: block; padding: 0.7em; border-radius: 50%; background: rgba(0,0,0,0.5); min-width: 1em; text-align: center; font-size: 3em; transition: box-shadow 300ms, font-size 200ms;
}
a:hover i {box-shadow: inset 0 0 3em rgba(0,0,0,0.6);}
footer, footer a { color: rgba(255,255,255,0.3);
}
footer { width: 100%; height: 1em; font-size: 0.8em; text-align: center; margin: 0; padding: 0;
}
.question { width: 80%; max-width: 49em; margin: 2em auto 0;
}
.question:last-child span{ margin: 2em auto 200em;
}
.question span { display: block; padding: 0 1em 0.1em; background: rgba(0,0,0,0.4); width: calc(100% - 2.5em); transition: all 200ms; font-size: 2em; font-weight: 400; color: #fff;	cursor: pointer;
}
.question span:hover {background: rgba(0,0,0,0.6);}
.question:nth-child(9n+1) span {border-left: solid 0.5em #F6BB42;}
.question:nth-child(9n+2) span {border-left: solid 0.5em #3BAFDA;}
.question:nth-child(9n+3) span {border-left: solid 0.5em #4A89DC;}
.question:nth-child(9n+4) span {border-left: solid 0.5em #37BC9B;}
.question:nth-child(9n+5) span {border-left: solid 0.5em #D770AD;}
.question:nth-child(9n+6) span {border-left: solid 0.5em #8CC152;}
.question:nth-child(9n+7) span {border-left: solid 0.5em #DA4453;}
.question:nth-child(9n+8) span {border-left: solid 0.5em #E9573F;}
.question:nth-child(9n+9) span {border-left: solid 0.5em #967ADC;}
.question li { width: calc(100% - 2em); background: rgba(0,0,0,0.3); padding: 1em; margin: 0; transition: all 200ms;	list-style-type: none;
}
.question ul { width: 100%; padding: 0; margin: 0;
}
.question ul {display:none;}
.question.active ul {display: block;}
img.left { float: left; margin: 0 1em 1em 0; box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
img.right { float: right; margin: 0 0 1em 1em; box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
p a { color: #fff; border-bottom: dotted 1px #000;
}
label { font-size: 32px; line-height: 70px; padding: 50px 0 0; vertical-align: middle;
}
input[type="text"], textarea { font-family: "open sans","Rockwell",Helvetica,Serif; font-size: 20px; width: 592px; height: 36px; margin-left: 0px; vertical-align: middle; border: none; border-radius: 5px; padding: 0 10px; border: dashed 3px transparent; outline: 0; transition: border 200ms; background: rgba(0,0,0,0.4); color: #fff;
}
input[type="text"]:nth-child(2) { margin-left: 53px;
}
input[type="text"]:nth-child(4) { margin-left: 61px;
}
textarea { margin: 20px 0 0 10px; height: 300px; padding: 14px; min-width: 0px; max-width: 586px; max-height: 500px;
}
label:nth-child(5) { vertical-align: top;
}
input[type="submit"] { font-family: "open sans","Rockwell",Helvetica,Serif; position: absolute; bottom: 20px; left: 0; margin: auto auto; font-size: 20px; width: 120px; height: 120px; background: rgba(0,0,0,0.1); padding: 10px; border: 0; outline: 0; border-radius: 50%; color: #fff; transition: all 200ms;
}
input[type="submit"]:hover { background: rgba(0,0,0,0.2);
}
input[type="submit"]:focus { background: transparent; color: transparent; border: none; transform: translateZ(0); border-top: solid 3px rgba(0,0,0,0); border-left: solid 3px rgba(0,0,0,0.4); box-shadow: none; -webkit-animation: spin 700ms linear infinite; animation: spin 700ms linear infinite;
}
form { width: 770px; position: relative; margin: -30px auto 0; padding: 0 10px 20px;
}
input:focus, textarea:focus { border: solid 3px rgba(0,0,0,0.2);
}
input:active, textarea:active { border: dashed 3px rgba(0,0,0,0.5);
}
.dev-head { margin-top: 1em;
}
.portfolio { max-width: 1000px; width: 80%; border: dashed 1px #bada55; margin: auto;
}
.work { width: 50%; height: 300px; float: left;
}
.work img { width: 500px; height: 300px;
}
@media (max-width: 1200px) { p { font-size: 1.1em; animation: fade-in 1s ease-out; -webkit-animation: fade-in 1s ease-out; }
}
@media (max-width: 950px) { .links a {font-size: 0.8em;} .links {max-width: 40.1em;} textarea {margin-left: 0;} form {width: 600px;} input[type="text"]:nth-child(2) {margin-left: 0;} input[type="text"]:nth-child(4) {margin-left: 0;} input[type="submit"] { width: 620px; border-radius: 3px; height: 50px; left: 10px; } input[type="submit"]:focus { -webkit-animation: load 1s; animation: load 1s; border-top: 0; border-left: 0; background: rgba(100,255,120,1); }
}
@media (max-width: 800px) { h2.hidden, span.hidden {display: block;} .home-circle { margin: -2em auto 2em; height: 7em; width: 7em; border-radius: 50%; background: #999 url(http://s3-us-west-2.amazonaws.com/s.cdpn.io/42863/profile/profile-512_5.jpg) 70% 0%; background-size: 8.2em 8.2em; box-shadow: 0 0 0 0.6em rgba(255,255,255,0.3); } .home-circle:before, .home-circle:after {content: '';} .links a {margin: 0;} .links a:nth-child(1) {float: left;} .links a:nth-child(2) {float: right;} .links a:nth-child(3) {float: left;} .links a:nth-child(4) {float: right;} .links { max-width: 20em; height: 16em; } footer a {display: none;} .question span {font-size: 1.5em;} input[type="text"], textarea {width: 100%;} input[type="submit"] {width: calc(100% + 14px);} form {width: 90%;}
}
@media (max-width: 500px) { .circle {display: none;} .question span {font-size: 1em;}
}
@keyframes bg-move
{
to { background-position: 200%; }
}
@-webkit-keyframes bg-move
{
to { background-position: 200%; }
}
@keyframes slide-in { from { padding-right: 120px; opacity: 0; }
}
@-webkit-keyframes slide-in { from { padding-right: 120px; opacity: 0; }
}
@keyframes fade-in { from { opacity: 0; }
}
@-webkit-keyframes fade-in { from { opacity: 0; }
}
@keyframes spin
{
0% {transform: rotate(0deg);}
50% {transform: rotate(180deg);}
100% {transform: rotate(360deg);} }
}
@-webkit-keyframes spin
{
0% {transform: rotate(0deg);}
50% {transform: rotate(180deg);}
100% {transform: rotate(360deg);}
}
@keyframes load
{
from {width: 0;}
to {width: 100%;}
}
@-webkit-keyframes load
{
from {width: 0;}
to {width: 100%;}
}
Added new link buttons. - Script Codes
Added new link buttons. - Script Codes
Home Page Home
Developer Ty Strong
Username tystrong
Uploaded August 11, 2022
Rating 4.5
Size 5,025 Kb
Views 44,528
Do you need developer help for Added new link 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!

Ty Strong (tystrong) Script Codes
Name
Beautiful Round Shadow
Updated Personal Page
Heart Monitor
CSS Laptop
Info on Hover
Colors and Media Queries
Social Network Messages
Spinning Submit Button
Title Logo
Another No Div Spinner
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!