Single-element Twitter button
How do I make an single-element twitter button?
A 3D Twitter button from in the CSS-Tricks Gallery with states.. What is a single-element twitter button? How do you make a single-element twitter button? This script and codes were developed by Billy Brown on 30 September 2022, Friday.
Single-element Twitter button - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Single-element Twitter button</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ button { background: linear-gradient(#ffffff, #dddddd); border: 0 solid transparent; border-radius: 100px; box-shadow: inset 0 -4px 1px #555, inset 0 5px 2px white, 0 5px 10px rgba(100, 100, 100, 0.9); position: relative; margin: 30px 50px; position: absolute; text-align: center; width: 100px; height: 100px;
}
button::before { content: url(http://druidofluhn.hostei.com/oldsite/twitter_ui/twitter.png); position: absolute; top: 24px; left: 18px;
}
button::after { background: radial-gradient(#eeeeee, rgba(240, 240, 240, 0)), linear-gradient(#bbbbbb, rgba(240, 240, 240, 0)); border-radius: 100px; content: ''; position: absolute; top: 0; left: 0; width: 100px; height: 200px; z-index: -1;
}
button:hover { box-shadow: inset 0 -2px 1px #555, inset 0 3px 2px white, 0 3px 6px rgba(100, 100, 100, 0.9); height: 99px;
}
button:hover::before { opacity: 0.8; top: 25px;
}
button:hover::after { background: radial-gradient(#eeeeee, rgba(240, 240, 240, 0)), linear-gradient(#bbbbbb, rgba(240, 240, 240, 0) 80%);
}
button:active { background: linear-gradient(#cccccc 30%, #ffffff); box-shadow: inset 0 6px 6px #555, inset 0 -1px 2px white;
}
button:active::after { display: none;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <button></button> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Single-element Twitter button - Script Codes CSS Codes
button { background: linear-gradient(#ffffff, #dddddd); border: 0 solid transparent; border-radius: 100px; box-shadow: inset 0 -4px 1px #555, inset 0 5px 2px white, 0 5px 10px rgba(100, 100, 100, 0.9); position: relative; margin: 30px 50px; position: absolute; text-align: center; width: 100px; height: 100px;
}
button::before { content: url(http://druidofluhn.hostei.com/oldsite/twitter_ui/twitter.png); position: absolute; top: 24px; left: 18px;
}
button::after { background: radial-gradient(#eeeeee, rgba(240, 240, 240, 0)), linear-gradient(#bbbbbb, rgba(240, 240, 240, 0)); border-radius: 100px; content: ''; position: absolute; top: 0; left: 0; width: 100px; height: 200px; z-index: -1;
}
button:hover { box-shadow: inset 0 -2px 1px #555, inset 0 3px 2px white, 0 3px 6px rgba(100, 100, 100, 0.9); height: 99px;
}
button:hover::before { opacity: 0.8; top: 25px;
}
button:hover::after { background: radial-gradient(#eeeeee, rgba(240, 240, 240, 0)), linear-gradient(#bbbbbb, rgba(240, 240, 240, 0) 80%);
}
button:active { background: linear-gradient(#cccccc 30%, #ffffff); box-shadow: inset 0 6px 6px #555, inset 0 -1px 2px white;
}
button:active::after { display: none;
}
Single-element Twitter button - Script Codes JS Codes
/*
** Single-element Twitter
** icon by Druid of Lûhn
** Original design:
** http://www.icondeposit.com/design:18
*/
Developer | Billy Brown |
Username | _Billy_Brown |
Uploaded | September 30, 2022 |
Rating | 3 |
Size | 3,173 Kb |
Views | 14,168 |
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 |
Mandelbrot Fractal | 2,706 Kb |
HMTL and CSS calendar | 3,153 Kb |
Playing with FlexBox | 3,162 Kb |
CSS-Tricks lodge button | 3,247 Kb |
Online Shop | 4,282 Kb |
Cropper.js example | 8,683 Kb |
Pure CSS image slider | 2,256 Kb |
Slideout Sidebar | 3,596 Kb |
Better Transparent input boxes | 2,286 Kb |
Number game | 3,790 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 |
TigerWoods Freecodecamp Page | Baileytj | 2,869 Kb |
Map Controls | Iliadraznin | 3,721 Kb |
Clock Face Idea | Chrisburnell | 3,196 Kb |
No Vacancy 404 CSS Only | Sethkontny | 0 Kb |
Sass Radar | Jlong | 6,887 Kb |
Scifi-style Interative Form | Aaronchuo | 4,566 Kb |
Simple Linear Regression with Editable Table | Melatonind | 3,264 Kb |
Weather App | Kw7oe | 3,162 Kb |
Pictos font library from CodePen | Jstam | 3,790 Kb |
Rainbow Preloader with Offset-Path | Rachelmcgrane | 2,721 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!