Help. How to make a button light up in html?
2014-10-15, 10:43 PM,
#1
alright so im wondering how can i make my button light up when i hover over it. or change color in my website ;O?

hope someone can help me out!
ty
Reply
Share This Thread :

2014-10-15, 10:51 PM,
#2
I can help you with this.
add me on skype: fkn-productions

-Fknpro
Reply
2014-10-15, 11:04 PM,
#3
I can but I won't share t here for everyone, PM me if you want the code
Reply
2014-10-15, 11:20 PM, (This post was last modified: 2014-10-15, 11:20 PM by Ownyzo.)
#4
The most simple method is to use css.
Here read this GUIDE (w3schools)
Reply
2014-10-15, 11:30 PM,
#5
Dont know if this is what you're looking for, but test it out :)
Code:
--Simple html--
<button>Click me!</button>
Code:
--CSS--
button
{
    display: block;
    font-size: 1.1em;
    font-weight: bold;
    text-transform: uppercase;
    padding: 10px 15px;
    margin: 20px auto;
    color: #ccc;
    background-color: #555;
    background: -webkit-linear-gradient(#888, #555);
    background: linear-gradient(#888, #555);
    border: 0 none;
    border-radius: 3px;
    text-shadow: 0 -1px 0 #000;
    box-shadow: 0 1px 0 #666, 0 5px 0 #444, 0 6px 6px rgba(0,0,0,0.6);
    cursor: pointer;
    -webkit-transition: all 150ms ease;
    transition: all 150ms ease;
}

button:hover, button:focus
{
    -webkit-animation: pulsate 1.2s linear infinite;
    animation: pulsate 1.2s linear infinite;
}
    
@-webkit-keyframes pulsate
{
    0%   { color: #ddd; text-shadow: 0 -1px 0 #000; }
    50%  { color: #fff; text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff; }
    100% { color: #ddd; text-shadow: 0 -1px 0 #000; }
}
        
@keyframes pulsate
{
    0%   { color: #ddd; text-shadow: 0 -1px 0 #000; }
    50%  { color: #fff; text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff; }
    100% { color: #ddd; text-shadow: 0 -1px 0 #000; }
}

button:active
{
    color: #fff;
    text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff;
    box-shadow: 0 1px 0 #666, 0 2px 0 #444, 0 2px 2px rgba(0,0,0,0.9);
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
    -webkit-animation: none;
    animation: none;
}
Kind regards,
Wezzlan!
Reply


Related Threads
Thread Author Replies Views Last Post
  CPABuild/ogads Iframe button immart247 2 168 2018-07-16, 07:19 AM
Last Post: immart247
  Button Install to offer?? wxp100 0 85 2018-07-07, 11:24 PM
Last Post: wxp100
  Clean ways to make money james1200 6 269 2018-06-30, 08:02 AM
Last Post: Zenit
  Struggling to make money direcT 6 415 2018-06-09, 07:55 PM
Last Post: direcT
  How To Make Instagram Accounts Unique? 5light 1 219 2018-05-28, 10:50 PM
Last Post: timilak65





About Us | Contact Us | CPA Elites | Advertise | Stats

© 2013-2018 CPA Elites Ltd
Enhanced by MyBB and WallBB
Return to top