App download button concept with pure CSS snippet

Buttons Bootstrap 5Free+ CSS

Add a button to your UI with App download button concept with pure CSS snippet. Free Bootstrap 5 code — HTML & CSS ready to copy, MIT licensed.

1.2k views35 downloads5 years ago

gosnippets.com/preview/app-download-button-concept-with-pure-css-snippet

Source Code

1<a class="download" href="#platforms"></a>
2<div class="platforms" id="platforms">
3	<a href="#windows" data-os="windows"></a>
4	<a href="#mac" data-os="mac"></a>
5	<a href="#linux" data-os="linux"></a>
6</div>
7<div class="installer" id="windows">
8	<div class="info" data-weight="753 KB"></div>
9	<div class="details">
10		<p>Windows installer</p>
11		<span>Version 1.0.6</span>
12		<ul>
13			<li>List item number one</li>
14			<li>List item number two</li>
15			<li>List item number three</li>
16			<li>List item number four</li>		
17		</ul>
18	</div>
19	<label for="progressWindows"><input type="radio" id="progressWindows"/><span></span></label>
20	<a class="close" href="#"></a>
21</div>
22<div class="installer" id="mac">
23	<div class="info" data-weight="634 KB"></div>
24	<div class="details">
25		<p>Mac installer</p>
26		<span>Version 1.0.6</span>
27		<ul>
28			<li>List item number one</li>
29			<li>List item number two</li>
30			<li>List item number three</li>
31			<li>List item number four</li>		
32		</ul>
33	</div>
34	<label for="progressMac"><input type="radio" id="progressMac"/><span></span></label>
35	<a class="close" href="#"></a>
36</div>
37<div class="installer" id="linux">
38	<div class="info" data-weight="781 KB"></div>
39	<div class="details">
40		<p>Linux installer</p>
41		<span>Version 1.0.6</span>
42		<ul>
43			<li>List item number one</li>
44			<li>List item number two</li>
45			<li>List item number three</li>
46			<li>List item number four</li>		
47		</ul>
48	</div>
49	<label for="progressLinux"><input type="radio" id="progressLinux"/><span></span></label>
50	<a class="close" href="#"></a>
51</div>

More Buttons snippets

Pure CSS Neon Button

Add a button to your UI with Pure CSS Neon Button. Free Bootstrap 5 code — HTML & CSS ready to copy, MIT licensed.

ButtonsView →

Firework Animation on Button Click

Firework Animation on Button Click — a free Bootstrap 5 button snippet. Copy the HTML, CSS & JS and paste straight into your Bootstrap 5 project.

ButtonsView →

Pure CSS Pulsing Button ripple effect animation

Pure CSS Pulsing Button ripple effect animation: a hand-crafted, open-source Bootstrap 5 button. HTML & CSS included, ready to copy.

ButtonsView →

Comments(0)

No comments yet — be the first to start the discussion.

1<a class="download" href="#platforms"></a> 2<div class="platforms" id="platforms"> 3 <a href="#windows" data-os="windows"></a> 4 <a href="#mac" data-os="mac"></a> 5 <a href="#linux" data-os="linux"></a> 6</div> 7<div class="installer" id="windows"> 8 <div class="info" data-weight="753 KB"></div> 9 <div class="details"> 10 <p>Windows installer</p> 11 <span>Version 1.0.6</span> 12 <ul> 13 <li>List item number one</li> 14 <li>List item number two</li> 15 <li>List item number three</li> 16 <li>List item number four</li> 17 </ul> 18 </div> 19 <label for="progressWindows"><input type="radio" id="progressWindows"/><span></span></label> 20 <a class="close" href="#"></a> 21</div> 22<div class="installer" id="mac"> 23 <div class="info" data-weight="634 KB"></div> 24 <div class="details"> 25 <p>Mac installer</p> 26 <span>Version 1.0.6</span> 27 <ul> 28 <li>List item number one</li> 29 <li>List item number two</li> 30 <li>List item number three</li> 31 <li>List item number four</li> 32 </ul> 33 </div> 34 <label for="progressMac"><input type="radio" id="progressMac"/><span></span></label> 35 <a class="close" href="#"></a> 36</div> 37<div class="installer" id="linux"> 38 <div class="info" data-weight="781 KB"></div> 39 <div class="details"> 40 <p>Linux installer</p> 41 <span>Version 1.0.6</span> 42 <ul> 43 <li>List item number one</li> 44 <li>List item number two</li> 45 <li>List item number three</li> 46 <li>List item number four</li> 47 </ul> 48 </div> 49 <label for="progressLinux"><input type="radio" id="progressLinux"/><span></span></label> 50 <a class="close" href="#"></a> 51</div>