Looking for styles to change your old glossy buttons with modern dayflat designs and 3d buttons ? You have come to the right place. Buttons have a great role for improving web site view. Button styles can denotes the purpose of that button.
Different frameworks are introducing their own buttons.for eg: boostrap {http://www.w3schools.com/bootstrap/bootstrap_ref_css_buttons.asp}
You can download different button effects from the internet.
More button effects link egs:
https://www.freshdesignweb.com/css3-buttons/http://tympanus.net/Development/CreativeButtons/
https://dcrazed.com/css-buttons-nice-hover-effects/
Below is a sample HTML markup for the button:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <style> | |
| .btn | |
| { | |
| text-transform: uppercase; | |
| letter-spacing: 2px; | |
| text-align: center; | |
| color: #0C5; | |
| font-size: 24px; | |
| font-family: "Nunito", sans-serif; | |
| font-weight: 300; | |
| margin: 5em auto; | |
| position: absolute; | |
| top:0; right:0; bottom:0; left:0; | |
| padding: 20px 0; | |
| width: 220px; | |
| height:30px; | |
| background:#FF5722; | |
| border: 1px solid #FF5722; | |
| color: #FFF; | |
| overflow: hidden; | |
| transition: all 0.5s; | |
| } | |
| .btn:hover, .btn:active | |
| { | |
| text-decoration: none; | |
| color: #FF5722; | |
| border-color: #FF5722; | |
| background: #FFF; | |
| } | |
| .btn span | |
| { | |
| display: inline-block; | |
| position: relative; | |
| padding-right: 0; | |
| transition: padding-right 0.5s; | |
| } | |
| .btn span:after | |
| { | |
| content: ' '; | |
| position: absolute; | |
| top: 0; | |
| right: -18px; | |
| opacity: 0; | |
| width: 10px; | |
| height: 10px; | |
| margin-top: -10px; | |
| background: rgba(0, 0, 0, 0); | |
| border: 3px solid #FFF; | |
| border-top: none; | |
| border-right: none; | |
| transition: opacity 0.5s, top 0.5s, right 0.5s; | |
| transform: rotate(-45deg); | |
| } | |
| .btn:hover span, .btn:active span | |
| { | |
| padding-right: 30px; | |
| } | |
| .btn:hover span:after, .btn:active span:after | |
| { | |
| transition: opacity 0.5s, top 0.5s, right 0.5s; | |
| opacity: 1; | |
| border-color: #FF5722; | |
| right: 0; | |
| top: 50%; | |
| } | |
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <a href="#" class="btn"> | |
| <span>Hover Me</span> | |
| </a> |
No comments :
Post a Comment