CODEWITHSUNDEEP
htmlcssbutton
Eduardo Arruda Pimentel
Eduardo Arruda Pimentel

Reputation: 518

What is the best way to do a arrow button?

I'm trying to create an arrow button like the upvote here in stackoverflow (http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=5).

The only difference is when I hover the mouse over the arrow, it will change the background image.

I need something like this http://css-tricks.com/snippets/css/css-triangle/, but with background image, instead of RGB color.

What is the best way?

Upvotes: 0

Views: 4065

Answers (1)

ShZ
ShZ

Reputation: 6596

If you know your background color, you can get sneaky. For example, if the background of the page is white...

HTML

<div id="arrow">

CSS

#arrow {
  width: 0;
  border: 40px solid white;
  border-bottom-color: transparent;
  background-image: url('...');
  background-position: -40px 0;
  background-repeat: no-repeat;
  background-size: 80px;
}

You'll have to munge with the background position and size properties to get exactly the effect you want.

Upvotes: 2

Related Questions