Search
Toggle Menu
Print PDF Subscribe
Topic: Top 5 awesome css button design
Post Date: 21/04/2017, 09:42 PM
Last active: 09/09/2020, 01:12 PM
Management
Prince *****
Threads: 1,094, Posts: 5613, Thanks: 3,874
hello all today i going to share with you awesome to 5 buttons css classes..

here is the look of this css coding..

İmage attached on tipsdunya

css:






html:






Enjoy.......


Possibly Related Threads...
Awesome Css Code Hide Show All Display Onclick
Awesome animated round circle css
Awesome universe space css code
Two Awesome CSS Effects
The Following 1 User Says Thank You To Prince For This Useful Post:
Akram Naaz
2.RE: Top 5 awesome css button design
Last active: 09/09/2020, 01:12 PM
Management
Prince *****
Threads: 1,094, Posts: 5613, Thanks: 3,874
Here is live demo


3.RE: Top 5 awesome css button design
Last active: 26/01/2018, 11:56 AM
Management
Mehak *****
Threads: 259, Posts: 656, Thanks: 589
Thanks for share.

Posted Via [Only registered and activated users can see links Click here to register]
4.RE: Top 5 awesome css button design
Last active: 17/12/2018, 11:39 PM
Mobile-Expert
Tanveer Armani ****
Threads: 638, Posts: 1171, Thanks: 2,166
<style><br />
body { text-align: center; padding: 40px; background: #F5F5F5; }<br />
.container { width: 500px; text-align: center; margin: auto;}<br />
.copyright { margin-top: 50px; font-size: 12px; text-transform: uppercase; }<br />
.copyright a { text-decoration: none; padding: 5px;background: #c0392b; color: #FFFFFF; }<br />
.copyright a:hover { background: transparent; color: #c0392b; }<br />
<br />
.button {<br />
display: inline-block;<br />
height: 50px;<br />
line-height: 50px;<br />
padding-right: 30px;<br />
padding-left: 70px;<br />
position: relative;<br />
background-color:rgb(41,127,184);<br />
color:rgb(255,255,255);<br />
text-decoration: none;<br />
text-transform: uppercase;<br />
letter-spacing: 1px;<br />
margin-bottom: 15px;<br />
<br />
<br />
border-radius: 5px;<br />
-moz-border-radius: 5px;<br />
-webkit-border-radius: 5px;<br />
text-shadow:0px 1px 0px rgba(0,0,0,0.5);<br />
-ms-filter:"progid<img src="https://tipsdunya.com/images/smilies/biggrin.png" alt="Big Grin" title="Big Grin" class="smilie smilie_4" />XImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#ff123852,Positive=true)";zoom:1;<br />
filter<img src="https://tipsdunya.com/images/smilies/tongue.png" alt="Tongue" title="Tongue" class="smilie smilie_5" />rogid<img src="https://tipsdunya.com/images/smilies/biggrin.png" alt="Big Grin" title="Big Grin" class="smilie smilie_4" />XImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#ff123852,Positive=true);<br />
<br />
-moz-box-shadow:0px 2px 2px rgba(0,0,0,0.2);<br />
-webkit-box-shadow:0px 2px 2px rgba(0,0,0,0.2);<br />
box-shadow:0px 2px 2px rgba(0,0,0,0.2);<br />
-ms-filter:"progid<img src="https://tipsdunya.com/images/smilies/biggrin.png" alt="Big Grin" title="Big Grin" class="smilie smilie_4" />XImageTransform.Microsoft.dropshadow(OffX=0,OffY=2,Color=#33000000,Positive=true)";<br />
filter<img src="https://tipsdunya.com/images/smilies/tongue.png" alt="Tongue" title="Tongue" class="smilie smilie_5" />rogid<img src="https://tipsdunya.com/images/smilies/biggrin.png" alt="Big Grin" title="Big Grin" class="smilie smilie_4" />XImageTransform.Microsoft.dropshadow(OffX=0,OffY=2,Color=#33000000,Positive=true);<br />
}<br />
<br />
.button span {<br />
position: absolute;<br />
left: 0;<br />
width: 50px;<br />
background-color:rgba(0,0,0,0.5);<br />
<br />
-webkit-border-top-left-radius: 5px;<br />
-webkit-border-bottom-left-radius: 5px;<br />
-moz-border-radius-topleft: 5px;<br />
-moz-border-radius-bottomleft: 5px;<br />
border-top-left-radius: 5px;<br />
border-bottom-left-radius: 5px;<br />
border-right: 1px solid rgba(0,0,0,0.15);<br />
}<br />
<br />
.button:hover span, .button.active span {<br />
background-color:rgb(0,102,26);<br />
border-right: 1px solid rgba(0,0,0,0.3);<br />
}<br />
<br />
.button:active {<br />
margin-top: 2px;<br />
margin-bottom: 13px;<br />
<br />
-moz-box-shadow:0px 1px 0px rgba(255,255,255,0.5);<br />
-webkit-box-shadow:0px 1px 0px rgba(255,255,255,0.5);<br />
box-shadow:0px 1px 0px rgba(255,255,255,0.5);<br />
-ms-filter:"progid<img src="https://tipsdunya.com/images/smilies/biggrin.png" alt="Big Grin" title="Big Grin" class="smilie smilie_4" />XImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#ccffffff,Positive=true)";<br />
filter<img src="https://tipsdunya.com/images/smilies/tongue.png" alt="Tongue" title="Tongue" class="smilie smilie_5" />rogid<img src="https://tipsdunya.com/images/smilies/biggrin.png" alt="Big Grin" title="Big Grin" class="smilie smilie_4" />XImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#ccffffff,Positive=true);<br />
}<br />
<br />
.button.orange {<br />
background: #FF7F00;<br />
}<br />
<br />
.button.purple {<br />
background: #8e44ad;<br />
}<br />
<br />
.button.turquoise {<br />
background: #1abc9c;<br />
}<br />
<br />
.button.red {<br />
background: #e74c3c;<br />
}<br />
</style><br />

[-]
Tags
design top awesome css button 5