1

I am brand new to CSS and only know very basic things. I found this code on the interwebs and it works to create a button but I will be using an image inside the button and when hovered I will have a color over the image and want to display text, how do I get it to say LEARN MORE once it is hovered? one more thing. how do I change the color when hovered? is there a way to change it using html color codes instead of the rgba? I have no idea how to use the rgba and want the color to change to #f58020 thanks and hopefully that makes sense

.circle {
  display:block;
  text-decoration:none;
  border-radius:100%;
  background:#12809b;
  width:100px;
  height: 100px;
  color:#fff;
  text-align:center;
  font:bold 16px/100px Arial, sans-serif;
  text-transform:uppercase;
  transition: all 0.4s ease-in-out;
  box-shadow:inset 0 0 0 5px rgba(0,0,0,.5), inset 0 0 0 10px rgba(255,255,255,.3);
}
.circle:hover {
  box-shadow:inset 0 0 0 10px rgba(255,255,255,.5), inset 0 0 0 100px rgba(0,0,0,.5);
}
2
  • 1
    you can try using jQuery to set text.
    – Bharadwaj
    Dec 19, 2014 at 5:51
  • with JQuery, $(".circle").hover(function () { $(this).val("Learn"); }, function () { $(this).val("default"); });
    – Bharadwaj
    Dec 19, 2014 at 6:07

5 Answers 5

2

please watch this link DEMO

HTML

<button class="circle" ><span>new</span></button>

CSS

span{
    display: none;
}
.circle {
  display:block;
  text-decoration:none;
  border-radius:100%;
  background:#12809b;
  width:100px;
  height: 100px;
  color:#fff;
  text-align:center;
  font:bold 16px/100px Arial, sans-serif;
  text-transform:uppercase;
  transition: all 0.4s ease-in-out;
  box-shadow:inset 0 0 0 5px rgba(0,0,0,.5), inset 0 0 0 10px rgba(255,255,255,.3);
}
.circle:hover{
  box-shadow:inset 0 0 0 10px rgba(255,255,255,.5), inset 0 0 0 100px rgba(0,0,0,.5);
}
.circle:hover span{
  display: block;
}
1

use

MARK UP

<div class="circle"><span>Learn</span></div>

or

<button class="circle"><span>Learn</span></button>

CSS

span{
  display: none;

}
.circle:hover span{

    display:block;
}

FIDDLE DEMO

1

You don't need to add non semantic html elements. Add those styles to your code to get the hidden text:

.circle {color: transparent}
.circle:hover {color: white}

<a class="circle">Learn<br>More</a>

Then, add a padding top to .circle, reduce height and change line-height:

.circle {height: 65px; padding-top: 35px; font:bold 16px/100% Arial, sans-serif;}

See example: jsfiddle

In your css reference you have:

.circle {font:bold 16px/100px Arial, sans-serif;}

The 100px refers to line-height, 100px is a lot. I suggest you to use 100% percentage for this case.
The <br> is for forcing a line break. You can remove if you want, but then you'll have to add more padding top, and reduce height.

0

you can use hover property to display content before or after

<!DOCTYPE html>
<html>
<head>
<style>
p:before 
{
content:"Read this -";
}
</style>
</head>

<body>
<p>My name is Donald</p>
<p>I live in Ducksburg</p>

<b>Note:</b> For the content property to work in IE8, a DOCTYPE must be declared.

</body>
</html>
0
<!DOCTYPE html>
<html>
<head>
<style type="text/css">

  a.hovertext {
    position: relative;
    width: 500px;
    text-decoration: none !important;
    text-align: center;
  }
  a.hovertext:after {
    content: attr(title);
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 0.5em 20px;
    width: 460px;
    background: rgba(0,0,0,0.8);
    text-decoration: none !important;
    color: #fff;
    opacity: 0;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
  }
  a.hovertext:hover:after, a.hovertext:focus:after {
    opacity: 1.0;
  }

</style>
</head>
<body>



<p><a class="hovertext" href="#" title="LEARN MORE"><img id="a" src="buttonImage.png" width="500" height="309" border="0" alt=""></a></p>

</body>
</html>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.