Make a awesome Div Button

Public

This create a simple button.

@url -> The url to the target without startig /.
Example:
1# downloads
2# downloads/nameofsomethingawesome
@text -> Text witch will appere on the Button

returns String

</> CopyGet raw version
php
  1. /**
  2.  * This create a simple button.
  3.  *
  4.  * @url -> The url to the target without startig /.
  5.  * Example:
  6.  * 1# downloads
  7.  * 2# downloads/nameofsomethingawesome
  8.  * @text -> Text witch will appere on the Button
  9.  *
  10.  * returns String
  11.  */
  12. function create_more_button($url = '', $text = 'Read more') {
  13. $button = '';
  14.  
  15. if ($url) {
  16. if ($url[0] == "/") {
  17. $clean_url = substr($url, 1);
  18. dsm($url . " => " . $clean_url);
  19. }
  20. else {
  21. $clean_url = $url;
  22. }
  23. }
  24. $button = '<div class="button-more">
  25. ' . l(t($text), $clean_url, array('attributes' => array('class' => array('expander')))) . '
  26. </div>';
  27.  
  28. return $button;
  29. }
</> CopyGet raw version
css
  1. /* Node More Button Settings */
  2.  
  3. .button-more a{
  4. color:#f6a924;
  5. font-size:12px;
  6. text-decoration:none;
  7. font-weight:bold;
  8. padding:6px;
  9. background: transparent;
  10. border: none;
  11. }
  12.  
  13. .button-more a:hover{
  14. color:#FFF;
  15. padding:5px;
  16. text-decoration: none;
  17.  
  18. /* Border and Rounded Corners */
  19. border:1px solid #b87501;
  20. -webkit-border-radius: 2px;
  21. -moz-border-radius: 2px;
  22. border-radius: 2px;
  23.  
  24. background: #f6a924; /* Old browsers */
  25. background: -moz-linear-gradient(top, #f6a924 0%, #e49100 100%); /* FF3.6+ */
  26. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6a924), color-stop(100%,#e49100)); /* Chrome,Safari4+ */
  27. background: -webkit-linear-gradient(top, #f6a924 0%,#e49100 100%); /* Chrome10+,Safari5.1+ */
  28. background: -o-linear-gradient(top, #f6a924 0%,#e49100 100%); /* Opera 11.10+ */
  29. background: -ms-linear-gradient(top, #f6a924 0%,#e49100 100%); /* IE10+ */
  30. background: linear-gradient(to bottom, #f6a924 0%,#e49100 100%); /* W3C */
  31. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6a924', endColorstr='#e49100',GradientType=0 ); /* IE6-9 */
  32. }

Comments

malcolm's picture

..and where is awesome CSS for this? :P