Image button
5 posts
Page 1 of 1
Quick Profile
Information
Posts: 833
Joined: Wed Jan 05, 2011 3:59 pm View Full Profile
Hello,
I have a question;
How to make image button in CSS?
Button should look like:
Thank you!
rep+ for answer
I have a question;
How to make image button in CSS?
Button should look like:
Thank you!
rep+ for answer
CodenStuff wrote:Nope, it's just your sick and dirty mind. You sick twisted warped little pervo
Quick Profile
Information
Posts: 1242
Joined: Fri Mar 26, 2010 1:59 pm View Full Profile
Well, the simplest way would be to do it through HTMl.
You could use this:
You could use this:
Code: Select all
<a href="url"><img src="the path for your button" alt="" /></a>
Quick Profile
Information
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am View Full Profile
To do this you'd use CSS3 Radial Gradients, now Opera currently doesn't support CSS3 radial gradients, but supports liner, and bi-liner gradients. Also IE doesn't support CSS3 gradients as well (As well as other CSS3 elements)
Before I go any further you can learn more about CSS3, and other languages on W3Schools.com.
Anyway here you go bro!
Before I go any further you can learn more about CSS3, and other languages on W3Schools.com.
Anyway here you go bro!
Code: Select all
NOTE: Remember most browser users, especially ones new to computers mainly use Internet Explorer. So I'd recommend sticking with images, if you don't want to go that way, you could do this in HTML5 as well.<html>
<head>
<title>CSS3 Radial Gradient</title>
<style type="text/css">
div.box1 {
width:100px;
height:100px;
background:-moz-radial-gradient(circle, #fff, #77b61e);
background:-webkit-gradient(radial, center center, 0, center center, 460, from(#fff), to(#77b61e));
background:-webkit-radial-gradient(circle, #fff, #77b61e);
border:0px;}
</style>
</head>
<body>
<div class="box1">
</div>
</body>
</html>
Quick Profile
Information
Posts: 833
Joined: Wed Jan 05, 2011 3:59 pm View Full Profile
Ohh, I explained wrong.. I wanted that picture is background and then i just need to enter text to display
Code: Select all
<a href="" class="button" title="Learn more!"><span>Learn more!</span></a>CodenStuff wrote:Nope, it's just your sick and dirty mind. You sick twisted warped little pervo
Quick Profile
Information
Posts: 621
Joined: Sat Oct 30, 2010 8:21 pm View Full Profile
visioncr0 wrote:Ohh, I explained wrong.. I wanted that picture is background and then i just need to enter text to displaythats quite simple
Code: Select all<a href="" class="button" title="Learn more!"><span>Learn more!</span></a>
Code: Select all
that must work.button {
display:block;
width: 100px;
line-height: 50px;
height: 50px;
background-image:url('images/button.png');
color:#fff; <- depends on the button backgroud
}
5 posts
Page 1 of 1
Copyright Information
Copyright © Codenstuff.com 2020 - 2023