<div id="app"></app>
.HatenaShareButton {
  display: block;
  font-weight: bold;
  font-size: 16px;
  text-align: center;
  text-decoration: none;
  color: white;
  border-radius: 50%;
  background: linear-gradient(
    #00a5e0 0%,
    #00a5e0 50%,
    #008de1 50%,
    #008de1 100%
  );
  width: 32px;
  height: 32px;
  line-height: 32px;
}

class HatenaShareButton extends React.Component {
  render() {
    const { url, title } = this.props
    return (
      <a
        className="HatenaShareButton"
        href={
          'http://b.hatena.ne.jp/add?mode=confirm&url=' + url + '&title=' + title
        }
        target="_blank"
        rel="nofollow"
      >B!</a>
    )
  }
}


class App extends React.Component {
  render() {
    return <div>
      <h1>こんにちは</h1>
      <HatenaShareButton url="https://www.ebiebievidence.com" title="エビエビエビデンスのホームページ" />
    </div>;
  }
}

/*
 * Render the above component into the div#app
 */
React.render(<App />, document.getElementById('app'));
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.min.js